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]'.
              }
        })
  })