使用 CSS 个模块全局导入外部样式表

Question

我正在努力通过 postcss 添加带有外部样式表的 SASS（Bulma) to my React application. So far I have set up Parcel 和 CSS 模块。这是我的 .postcssrc 配置：

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    },
    "postcss-modules": {
      "generateScopedName": "[name]_[local]_[hash:base64:5]"
    }
  }
}

我已安装 node-sass 并成功将 .scss 文件添加到我的组件之一。外部 (Bulma) 样式通过 @import "~bulma/bulma"; 添加并正确解析。

不幸的是，导入的样式没有全局应用，而是 class 名称被修改为类似于本地定义，例如：

/*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */
@-webkit-keyframes container_spinAround_28_Bz {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }
@keyframes container_spinAround_28_Bz {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }

注意添加的前缀和后缀。

理想情况下，我希望全局导入样式表并且不修改它们的名称。我想继续使用 CSS 模块，我想我还必须使用 SASS 以便通过覆盖 SASS 变量来全局修改 Bulma 样式表。

无论如何，到目前为止我已经尝试过的事情：

使用 postcss-nested 并用 :global 块包装导入：

:global {
  @import "~bulma/bulma";
}

但是，这会引发异常：

main.scss:5018:5: Missing whitespace before :global

创建一个单独的 scss 文件，通过 <link> 直接包含在 HTML 文件中，而不是导入到 jsx/tsx 文件中，以避免使用 CSS 模块。

这似乎完全破坏了 Parcel，因为它无法 link 更正已编译的 HTML 文件中的文件，即 <LONG-HASH>.css 而不是生成的 main.<HASH>.css。

使用 postcss-import.

要么我的设置不正确，要么对 SASS 个文件没有影响。

Answer 1

您可以使用 globalModulePaths 设置定义正则表达式以将匹配的文件标记为全局样式表。

    "postcss-modules": {
      "globalModulePaths": [
        ".*\.global\..*"
      ]
    }

上面的示例将在名称中标记所有带有 .global. 的文件，例如main.global.css.

在写问题的时候设法弄明白了。

Answer 2

对我来说从汇总加载全局 CSS 样式（应用 preserveModules: true 时）的唯一解决方案是使用 'rollup-plugin-styles'插件和以下配置：

// rollup.config.js

   plugins: [
     styles({
        extensions: ['.css'],
        use: ['css'],
     }), …
  ]

// 在 package.json 你必须添加适当的副作用

{
 "sideEffects": [
  "**/*.css",
  "**/*.css.js" //this one is very important too            
], 
 }

// MyComponent.tx

import '../styles/myGlobal.css';

使用 CSS 个模块全局导入外部样式表

Importing external stylesheets globally with CSS modules

sass

postcss

css-modules

bulma

parceljs