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

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

他们不这样做。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 https://www.npmjs.com/package/@dr.pogodin/babel-plugin-react-css-modules这解决了与最新版本的兼容性问题css-loader版本。