react 中 css scss module
文章目录前言一、css module二、sass前言在react项目中,随着项目的庞大模块功能的复杂,引入css文件根据个人情况不同,难免会造成class样式冲突,而且react不像vue,每个组件的样式都会通过scope封装一层,这样就需要自己去注意样式的冲突,css module 就是和vue scope的模式一样,通过对class样式的名字进行封装处理,从而达到class类名不冲突一、css
文章目录
前言
在react项目中,随着项目的庞大模块功能的复杂,引入css文件根据个人情况不同,难免会造成class样式冲突,而且react不像vue,每个组件的样式都会通过scope封装一层,这样就需要自己去注意样式的冲突,css module 就是和vue scope的模式一样,通过对class样式的名字进行封装处理,从而达到class类名不冲突
一、css module
使用.css文件进行模块化,需要webpack配置,使用css-loader开启模块化进而对css文件处理
//webpack chain配置
config.module
.rule('css')
.test(/\.css/)
.use('css-loader')
.options({
modules: true,
localIdentName: '[name]__[local]--[hash:base64:5]' // 文件名——calss名--hash前五位
})
//webpack配置
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader?modules"//modules表示开启模块化
},
]
}
.index.css样式代码如下(示例):
.risk{
color:red
}
App.js ,以react做例子
import style from './index.css';
<div className={style['risk']}>
</div>
从控制台可看出classname变成了如下
<div class='_3zMJvT60v82mw2F5B4PvUX'></div>
二、sass
使用scss module时,文件必须是xxx.module.scss,这样才会被匹配到进行模块化
//index.module.scss
.risk{
color:red,
.a{
height:10px
}
}
在App.js,可以看出引入的style打印出来是一个一级对象,文件中嵌套的样式都会被扁平化
//App.js
import style from './index.module.scss';
<div className={style['risk']}>
<div className='a'></div>
</div>
//打印出style结果如下
{
risk:'_3zMJvT60v82mw2F5B4PvUX',
a:'Fs10_N2mc0ZUpGUE8Bawd'
}
从界面上看出class为a的样式没有作用上,因为按照以上子元素div引入class a的形式,是代表全局样式,当父级元素使用模块化样式后,子集元素也默认使用模块化的class样式,所以a的样式没有作用上,应该修改为style.a的方式引用,或者把a样式使用global设置全局样式
.risk{
color:red,
:global{
.a{
height:10px
}
}
}
但是将a样式设置成全局样式后,又可能会造成样式冲突,所以看情况使用,因为我的项目中需要对ant的某些样式进行修改,所以可以使用global
更多推荐
所有评论(0)