使用 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 文件添加到我的一个组件中。外部 (Bulma) 样式通过 @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.

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