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

时间:2017-12-06 13:50:58

标签: reactjs webpack react-css-modules babel-plugin-react-css-modules

问题

我正在尝试在我的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

知道为什么有一个超级包装?

1 个答案:

答案 0 :(得分:3)

经过一番挣扎后,我自己找到了解决方案。

原因

这是由于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'
        ]
}