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

Question

我正在努力将带有外部样式表（Bulma）的SASS添加到我的React应用程序中。到目前为止，我已经通过postcss用CSS模块设置了Parcel。这是我的.postcssrc配置：

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

我已经安装了node-sass，并已成功将.scss文件添加到我的组件之一。通过@import "~bulma/bulma";添加了外部（布尔玛）样式，并且已正确解析。

不幸的是，导入的样式不会全局应用，而是类似于本地定义对类名进行了修改，例如：

/*! 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，因为它无法链接已编译HTML文件中的正确文件，即<LONG-HASH>.css而不是生成的main.<HASH>.css。

• 使用postcss-import。

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

Answer 1

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

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

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

在写问题时设法弄清楚。