目的
局部组件引入局部css样式,实现css模块化开发; 减免全局污染
操作
-
启用css modules
{ loader: 'css-loader', options: { modules: true, localIdentName: '[local]___[hash:base64:5]' } } 复制代码
modules: true,启用模块化
localIdentName: '[local]___[hash:base64:5]',按照给定算法所生成的样式类名.有效避免类名重复
-
使用css modules
- 局部模式--:local
/* index.less */
.divContainer { :local(.divContainer) {
background: #fff; 等价于 background: #fff;
} }
/* xx.jsx*/
import styles from './index.less'; // 引入局部less文件
<div className={styles.divContainer}>...</div> // 将类名绑定在元素上
/*最后生成文件中对应的样式类名*/
<div class="divContainer___34Uoz">... </div>
复制代码
- 全局模式--:global
:global {
.divContainer { :global(.divContainer) {
background: #fff; 等价于 background: #fff;
} }
}
复制代码
- 注意事项
避免转换引入插件中的css样式
{
/*webpack.config.js*/
// 对于node_modules文件夹以外的less文件, 开启css module模式
test: /\.less?$/,
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader, {
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]___[hash:base64:5]'
}
}, 'postcss-loader', {
loader: 'less-loader',
options: {
modifyVars: theme
}
}]
},
// 对于node_modules中的less文件,不开启css module模式
{
test: /\.less?$/,
include: /node_modules/,
use: [MiniCssExtractPlugin.loader, css-loader, 'postcss-loader', less-loader']
}
复制代码