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

Question

问题

我正在尝试在我的 React 项目中使用babel-plugin-react-css-modules来获得比React CSS Modules更好的性能。

但是，这些样式没有正确应用。

原因

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

• 在标签中<style>：-components-Foo-___Foo__foo___1fcIZ-
• 关于 DOM 元素类名：components-Foo-___Foo__foo___1fcIZ

即使我们使用相同的localIdentName，生成的结果也与 DOM 元素上的 css 和 className 中的选择器不同。

（注意：在 babel-plugin-react-css-modules 中，是localIdentName硬 [path]___[name]__[local]___[hash:base64:5]编码的 options.generateScopedName）

知道为什么会有连字符包装器吗？

Answer 1

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

原因

这是由于一个怪癖css-loader：如果选项周围有双引号localIdentName，它将用连字符将生成的类名括起来。

工作示例

因此，不要在 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'
        ]
}