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

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

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

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？两者如何协同工作？ IE。以什么顺序发生什么？

解决方法

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

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

无耻的自我宣传：我维护了一个 up-to-date fork of babel-plugin-react-css-modules，它解决了与最新 css-loader 版本的兼容性问题。