react中css作用模块化webpack配置
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导入后输出的对象的属性名不在是空，而且有了变化
