react 中 css-loader 配置防止className命名冲突

Question

我想实现在多个组建中添加相同className名时，不发生冲突。 想给每个class名称添加一个Base64的5位hash随机名称。 跟着npm官网上说的配出来不生效，反而所有的css样式都失效了。
请大神帮忙看下哪里错了，不胜感激：

{
 test: /\.css$/,
 use: [
    'style-loader',
   {
     loader: 'css-loader',
     options: {
       modules: true,
       localIdentName: '[path][name]__[local]--[hash:base64:5]'
     }
   }
 ]
}

Answer 1

webpack配置没错，样式失效了也正常

在React组件中你的className都是未hash的className，当然样式失效了。。

Answer 2

Webpack 配置写错了……看下我这个项目中对css的处理吧！有问题评论我再回复。地铁上码字太费劲。https://github.com/Nealyang/R...

Answer 3

用这个配置

{
   loader: 'css-loader',
     options: {
     importLoaders: 1,
     modules: true,
     camelCase: true,
     localIdentName: '[name]_[local]_[hash:base64:5]',
   },
}

Answer 4

// CSS 模块化
{

test: /\.css$/,
exclude: bypassedCSS,
use: [{
    loader: 'style-loader'
}, {
    loader: 'css-loader',
    options: {
        modules: true,
        localIdentName: '[name]_[local]--[hash:base64:5]',
        minimize: false
    }
}]

}

Answer 5

如果开启了css模块化的功能的话

import styles from 'yourCssUrl.css';
...

<div className={styles.yourCssClass} > ... </div>