1

当同时使用 webpack 和 babel 时，需要同时配置两者才能使用 React CSS 模块。例如：

webpack.config.js将需要这样的规则：

{
  // Translates CSS into CommonJS modules
  loader: 'css-loader',
  options: {
    modules: {
      mode: "local",
      localIdentName: CSS_CLASS_NAME_PATTERN,
    },
  sourceMap: true
}

babel.config.js将需要这样的插件：

[
  'react-css-modules',
  {
    generateScopedName: CSS_CLASS_NAME_PATTERN,
    filetypes: {
      '.scss': {
        syntax: 'postcss-scss',
        plugins: ['postcss-nested']
      }
    },
  }
]

为什么需要在两个地方配置 CSS Modules？两者如何协同工作？即按什么顺序发生什么？

4

1 回答 1

3

他们没有。css-loader做自己的事：CSS 中的类名转换，以及通过原始名称和生成名称之间的映射替换 JS 代码中的 CSS 导入。

babel-plugin-react-css-modules独立工作，它用正确的生成名称替换styleName反应组件的属性。className为此，它独立于 计算类名映射css-loader，这就是为什么它需要与 的配置匹配的单独配置css-loader，这就是为什么在其创建者放弃几年后它与最新的兼容性问题css-loader（css-loader 更改了内部类名生成逻辑） .

无耻的自我推销：我维护了一个最新的分支，babel-plugin-react-css-modules它解决了与最新css-loader版本的兼容性问题。

于 2021-04-24T10:47:44.777 回答