react 中 css scss module

---

前言

在react项目中，随着项目的庞大模块功能的复杂，引入css文件根据个人情况不同，难免会造成class样式冲突，而且react不像vue，每个组件的样式都会通过scope封装一层，这样就需要自己去注意样式的冲突，css module 就是和vue scope的模式一样，通过对class样式的名字进行封装处理，从而达到class类名不冲突

---

一、css module

使用.css文件进行模块化，需要webpack配置，使用css-loader开启模块化进而对css文件处理

//webpack chain配置
 config.module
      .rule('css')
      .test(/\.css/)
      .use('css-loader')
      .options({
        modules: true,
        localIdentName: '[name]__[local]--[hash:base64:5]'  // 文件名——calss名--hash前五位
      })
//webpack配置
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader?modules"//modules表示开启模块化
      },
    ]
  }

.index.css样式代码如下（示例）：

.risk{
    color:red
}

App.js ,以react做例子

import style from './index.css';
 <div className={style['risk']}>
 </div>

从控制台可看出classname变成了如下

<div class='_3zMJvT60v82mw2F5B4PvUX'></div>

二、sass

使用scss module时，文件必须是xxx.module.scss,这样才会被匹配到进行模块化

//index.module.scss
.risk{
    color:red,
    .a{
        height:10px    
    }
}

在App.js，可以看出引入的style打印出来是一个一级对象，文件中嵌套的样式都会被扁平化

//App.js
import style from './index.module.scss';
 <div className={style['risk']}>
 	<div className='a'></div>  	
 </div>
 
//打印出style结果如下
{
    risk:'_3zMJvT60v82mw2F5B4PvUX',
    a:'Fs10_N2mc0ZUpGUE8Bawd'
}

从界面上看出class为a的样式没有作用上，因为按照以上子元素div引入class a的形式，是代表全局样式，当父级元素使用模块化样式后，子集元素也默认使用模块化的class样式，所以a的样式没有作用上，应该修改为style.a的方式引用，或者把a样式使用global设置全局样式

.risk{
    color:red,
    :global{
        .a{
            height:10px    
        }       
    }
}

但是将a样式设置成全局样式后，又可能会造成样式冲突，所以看情况使用，因为我的项目中需要对ant的某些样式进行修改，所以可以使用global