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

Question

当一起使用webpack和巴别塔时，为了使用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独立工作，它将react组件的styleName属性替换为具有正确生成的名称的className。为了做到这一点，它独立于css-loader计算类名映射，这就是为什么它需要与css-loader匹配的单独配置，这也是为什么在被创建者抛弃几年后，它与最新的css-loader (css-loader改变了内部类名生成逻辑)的兼容性问题。

不知羞耻的自我宣传:我维护了一个解决了最新css-loader版本兼容性问题的up-to-date fork of babel-plugin-react-css-modules。