0

我想实现在多个组建中添加相同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]'
     }
   }
 ]
}

5个回答

1

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

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

0

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

0

用这个配置

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

// CSS 模块化
{

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

}

0

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

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

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

撰写答案