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

Posted 2023-03-15

【中文标题】使用 CSS 模块全局导入外部样式表

【英文标题】：Importing external stylesheets globally with CSS modules

【发布时间】：2020-06-27 09:20:57

【问题描述】：

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

  "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 文件没有影响。

【参考方案1】：

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

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

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

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

【讨论】：

谢谢，我尝试了其他一百万个答案，但只有你的有效！我将它添加到.postcs-s-rc.json，我可以确认，它也可以这样工作。