react-css-modules (babel) 和 css-loader (webpack) 如何协同工作？

Question

当同时使用 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 模块？两者如何合作？即按什么顺序发生什么？

Answer 1

他们不这样做。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。