React使用css-module方法

css-module介绍

css-module主要针对css组件化开发，避免污染全局样式，在react中的使用相当于vue中的scoped

通过create-react-app新建项目

执行npm run eject抛出config配置，该过程是不可逆的
可能会出现的报错情况：

报错的原因是需要初始化git，
首先需要进行git init的初始化
然后进行本地提交 git add .
文字说明 git commit -m"init"
这些步骤执行完之后，可再次执行npm run eject，我们需要的config文件终于在工程根目录出来了

修改config配置

create-react-app在2.0以后开始配置了该模块，所以可忽略

再在module中去增加配置
{
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              sideEffects: true,
            },
            {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            }, 
            {
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'sass-loader'
              ),
              sideEffects: true,
            },
            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'sass-loader'
              ),
            }

使用方法

新建一个css文件 Login.module.css(也可以吃scss/less)
在组件中使用方法
import styles from './Login.module.css'
<div className={styles.wrapper}></div>
！最后就可以避免css的全局污染了