react中使用普通的css样式表会造成作用域的冲突，css定义的样式的作用域是全局，在Vue 中我们还可以使用scope来定义作用域，但是在react中并没有指令一说，所以只能另辟蹊径了。下面我将简单记录并介绍一下在webpage配置实现css 的模块化。
webpack的配置： 截取一小段
{
test: /\.css/,use:['style-loader','css-loader?modules$localIdentName=[path][name]-[local]-[hash]']
}
如上所示：
这里讲解一下localIdentName自定义生成的类名格式，可选参数有：
- [path]表示样式表相对于项目根目录所在的路径
- [name] 表示样式表文件名称
- [local] 表示样式表的类名定义名称
- [hash:length] 表示32位的hash值
注意：只有类名选择器和ID选择器才会被模块化控制，类似body h2 span 这些标签选择器是不会被模块化控制
使用过程如下：
import cname from '@xxx.css' => .title{color:red;}
//这里你可以输出测试一下cname的值 console.log(cname)
//react中的部分代码
render(){
return(
<div>
<h2 className={cname.title}>这里是标题<h2>
</div>
)
}
一句HTml多类名配置如下：
//test 为全局样式 通过加空格实现 <h1 className={[cname.title, 'test'].join(' ')}></h1>
当然这里还有一种情况就是在模块化的样式表中，你不希望某个类或者ID被模块化，想让他成为全局样式，可以通过：global配置： .test是你不希望被模块化的类
//被：global包裹起来的类名，不会被模块化，而是会全局生效
：global(.test){
color:blue;
}