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导入后输出的对象的属性名不在是空，而且有了变化