reactjs - 如何让CSS Modules默认全局导入文件？

Question

我正在尝试在我使用 React 和 Webpack 的项目中实现 CSS 模块。但是，我想继续使用我创建的所有全局 CSS。

例如，之前我在React中像这样导入了css

import './styles.scss'

然后，将有一个使用 .button 类的 html 元素，该类存在于 ./styles.scss

中

<button className='button'>Click me</button>

现在因为我想实现 CSS 模块，所以我修改了 webpack 中的 css-loader 配置，如下所示

module: {
  rules: [{
    test: /\.s?css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          // This is where I added the config for css modules
          modules: true,
          localIdentName: '[hash:base32:5]-[name]-[local]',
          importLoaders: 2,
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          config: {
            path: './postcss.config.js',
          },
        },
      },
      'sass-loader',
    ]
  }]
}

但是，现在当我这样导入时，我无法使用 button 类名

import './styles.scss'

因为./styles.scss中的类名都转换为基于哈希的类名，例如32osj-home-button

基本上，当我以这种方式导入时，如何配置 css-loader 来正常加载 css

import './styles.scss'

但是当我以这种方式导入时使用CSS模块吗？

import styles from './styles.scss'

或者

是否有任何配置可以设置CSS模块默认加载:global中的所有CSS，并且当我指定时仅加载:local中的CSS？

仅供引用，我知道我可以制作 2 个加载器配置来为以此方式命名的 css 文件应用 css 模块

styles.modules.scss

并为默认命名的 css 应用普通的 css-loader

styles.scss

但是，我不想这样做，因为 Webpack 捆绑它们后会创建更多文件。

Answer 1

对于 css 模块，我这样使用它:

import styles from './styles.scss'

<button className={styles.button}>Click me</button>

导入的样式实际上是一个带有 [className] => [hashed_className] 的 map

您放入 :global block 中的所有内容都不会转换为 CSS 哈希名称

:global {
    .button {
        color: #FF0000;
    }
}
.button {
    color: #000000;
}

应该输出

.button {
    color: #FF0000;
}
.32osj-home-button {
    color: #000000;
}