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

Answer 1

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

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

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