前言
之间在react中一直用的普通的引入css，觉得挺好用的，也没出现过什么问题，最近才开始用css模块
- 它会给css自动添加一些后缀的东西，可以有效避免全局冲突，覆盖其他地方的样式
- 实现模块化可以多次使用，webpack也可以选择不编译没有使用到的css
webpack配置
{
test: /\.css$/,
include: resolve('src'),
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(scss|sass)$/,
include: resolve('src'),
use: [
'style-loader',
// 模块化的sass
{
loader: 'css-loader',
options: {
modules: true,// 开启模块化
locaIdentName: '[name]-[local]-[hash:base64:6]'
}
},
'sass-loader',
'postcss-loader' // autoprefixer
]
}
使用
基本写法和css类似，使用方法有点不一样
local
// normal.less
.normal{} // 写法1
:local(.normal){} // 写法2
// normal.js
import styles from 'normal.less'
<div className={styles.normal}></div>
// 添加多个样式可以拼接字符串，styles.normal本质是编译过后的字符串
global
// normal.less
:global(.normal){}
// normal.js
import styles from 'normal.less'
<div className='normal'></div>
// 添加多个样式可以拼接字符串，styles.normal本质是编译过后的字符串
总结
其实明白了原理就知道具体用法了
- 模块化其实就是对类名进行修改，添加一些后缀，
styles.normal本质上是一个字符串，只不过是添加后缀之后的新类名，具体规则建议了解BEM命名规范 - 而模块化的编译原理就是对
:local的编译，:global是不会被编译，同时也不能通过styles获取，只能字符串书写。
