React 脚手架 create-react-app 中如何配置 CSS_Modules

create-react-app 没有对 css_modules 进行做配置，所以需要手动配置 webpack ，才可以使用 css_modules 的写法。这里并没有将 webpack 原有的配置暴漏出来，而是使用 react-app-rewired 这个库对原有 webpack 进行覆盖并添加相关的个人所需配置。
如果觉得配置起来比较麻烦也可以选用 蚂蚁金服推出的 UMI 脚手架，其已经帮我们配置好了 css_moduels 、router、等库的使用无需个人手动配置。

一、安装依赖包：

  npm install --save-dev react-app-rewire-less-modules 
  npm install --save-dev react-app-rewired
  npm install --save-dev customize-cra

二、修改package.json 文件

    scripts: {
  -   "start": "react-scripts start",
  +   "start": "react-app-rewired start",
  -   "build": "react-scripts build",
  +   "build": "react-app-rewired build",
  -   "test": "react-scripts test",
  +   "test": "react-app-rewired test",
      "eject": "react-scripts eject"
  }

三、项目根目录下新建 config-overrides.js

  const {override,addLessLoader}=require('customize-cra')
  
  module.exports = override({
        addLessLoader({
              strictMath:true,
              noIeCompat:true,
              cssModules:{
                    localIdentName: "[path][name]__[local]--[hash:base64:5]", // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
              }
        })
  })