1、react中css模块化可通过配置webpack
类似于vue中css作用域有scoped指令作用组件内起作用,
(1)、css模块化只对class类名和id选择器,对标签不生效
css-loader之后可通过?追加参数,类似地址栏url参数形式
固定参数modules,表示普通css样式表,启用模块化
module:{
rules:[
{ test:/\.css/,use:['style-loader','css-loader?modules'] } //注意loader顺序 style (动态生成style标签)、css(处理css文件依赖关系)
]
}
(2)、使用localIndexName自定义生成的类名格式,可选参数
[path]:表示样式表相对于根目录所在路径(带有符号 - )
[name]:表示样式表文件名
[local]:表示样式的类名定义名称
[hash:length]:不传默认32位hash值,一般可取5或6即可
例子:{ test:/\.css/,use:['style-loader','css-loader?modules&localIndexName=[path][name]-[local]-[hash:5]'] }
效果:
(3)、使用:local()和:global()
- :local()包裹的类名会被模块化,只能通过className={cssObj.类名}来使用,同时,默认可以不写,也会被模块化
- :global()包裹类名全局生效,不被css-modules控制,定义类名是什么,就使用定义的类名className="类名",
例子1:
:global(.test){
font-size:18px;
}
例子2:多个类名合在一起使用
<h1 className={cssObj.title +" title"}>评论列表</h1>
<h1 className={[cssObj.title ,"title"].join(' ')}>评论列表</h1>
2、模块化打包的效果
css文件中的属性名
import导入后输出的对象的属性名不在是空,而且有了变化