React使用css样式表及其模块化

React使用css样式表

出现问题

直接import导入组件样式表，默认是在全局上，整个项目都会生效

解决方案-模块化

在webpack.config.js中通过modules参数启用模块化
模块化只对类选择器和Id选择器有效

{ test: /\.css$/, use: ['style-loader','css-loader?modules']}

localIdentName自定义生成的类名样式

可选参数
[path]表示样式表相对于项目根目录所在路径
[name]表示样式表文件名称
[local]表示央视的类名定义名称
[hash:length]表示32位hash值

{ test: /\.css$/, use: ['style-loader','css-loader?modules&localIdentName=[path]-[name]-[local]-[hash:5]'] }

使用：local（）和：global（）

:local()包裹的类名是被模块化的类名，只能通过className={cssObj.类名}使用，:local默认不可写
:global()包裹的类名是全局生效的，不会受到css-modules的限制，直接通过className={类名}使用

注意：只有.title这样的类样式选择器，才会被模块化控制，类似于body这样的标签选择器，不会被模板控制

:global(.test){
	font-style: italic;
	}

在项目中启用模块化并同时使用第三方样式表

出现问题

{ test: /\.css$/, use: ['style-loader','css-loader?modules&localIdentName=[path]-[name]-[local]-[hash:5]'] }

模块化将导致第三方的样式表无法正常使用

解决方案

把自己的样式表，定义为.scss或.less文件

{ test: /\.css$/, use: ['style-loader','css-loader'] }
{ test: /\.scss$/, use:['style-loader','css-loader?modules&localIdentName=[path]-[name]-[local]-[hash:5]','sass-loader'] }