babel-plugin-react-css-modules 不匹配样式与 styleName

babel-plugin-react-css-modules is not matching styles with styleName

问题

我正在尝试在我的 React 项目中使用 babel-plugin-react-css-modules 以获得更好的性能,而不是 React CSS 模块

但是,未正确应用样式。

原因

<style>标签中的版本用奇怪的连字符包裹,例如:

Even if we are using the same localIdentName, the generated results are different from selectors in css and className on DOM element.

(Note: In babel-plugin-react-css-modules, the localIdentName is [path]___[name]__[local]___[hash:base64:5] as hard-coded in options.generateScopedName)

知道为什么会有 hypen-wrapper 吗?

经过一番努力,我自己找到了解决方案。

原因

这是由于 css-loader 的一个怪癖:如果 localIdentName 选项周围有双引号,它将用连字符包裹生成的 class 名称。

工作示例

所以不要在 webpack 配置中这样做:

{
    test: /\.(scss|sass)$/,
    use: [
        'style-loader?sourceMap',
        'css-loader?modules="true"&importLoaders="1"&localIdentName="[path]___[name]__[local]___[hash:base64:5]"',
        'sass-loader?sourceMap',
    ],
},

这样做:

{
    test: /\.(scss|sass)$/,
    use: [
        'style-loader?sourceMap',
        'css-loader?modules="true"&importLoaders="1"&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        'sass-loader?sourceMap',
    ],
},

如果您使用的是 Webpack 2+,甚至更好

{
        test: /\.(scss|sass$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,    
              modules: true,
              sourceMap: true,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
            }
          },
          'sass-loader'
        ]
}