react中css作用模块化webpack配置

1、react中css模块化可通过配置webpack

类似于vue中css作用域有scoped指令作用组件内起作用,

css模块化只对class类名和id选择器,对标签不生效

css-loader之后可通过?追加参数,类似地址栏url参数形式

固定参数modules,表示普通css样式表,启用模块化

module:{ 
    rules:[
        { test:/\.css/,use:['style-loader','css-loader?modules'] }   //注意loader顺序 style (动态生成style标签)、css(处理css文件依赖关系)
    ]
}

2、模块化打包的效果 

css文件中的属性名

react中css作用模块化webpack配置

import导入后输出的对象的属性名不在是空,而且有了变化

react中css作用模块化webpack配置

react中css作用模块化webpack配置