babel-css-模块与styleName的样式不匹配。

Question

问题

我试图在我的React项目中使用babel-plugin-react css-模块，以获得更好的性能，而不是React。

然而，这些样式并没有被正确应用。

致

例如，<style>标记中的版本是用奇怪的催眠术包装的：

• 在<style>标记中：-components-Foo-___Foo__foo___1fcIZ-
• 在DOM元素类名上：components-Foo-___Foo__foo___1fcIZ

即使我们使用相同的localIdentName，生成的结果也不同于css中的选择器和DOM元素上的className。 (注意:在babel-plugin css-模块中，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'
        ]
}