react antd樣式按需加載配置以及與css modules模塊化的沖突問題

通過create-react-app腳手架生成一個項目
然后運行npm run eject 把webpack的一些配置從react-scripts模塊彈射出來，
方便自己手工增減，暴露出來的配置文件在app/config下面。

1、antd樣式按需加載

用到babel-plugin-import bebel插件
直接在package.json里面添加配置就可以按需加載了：

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        }
      ]
    ]
  }
  
現在使用antd組件就不用引用樣式了
(官網上是推薦使用react-app-rewired(customize-cra)模塊，
自己建一個config-overrides.js對包里的webpack配置進行覆蓋,感覺多了一個配置不怎么好。）


2、antd設置按需加載樣式后和css模塊化的沖突問題

其實webpack.config.js里默認已經寫好了配置,即匹配cssModuleRegex的loader設置，
只需要將我們需要模塊化的樣式文件后綴進行修改

文件后綴修改成xxx.module.css即可。


最終項目里引用樣式：

入口文件引用全局公共自定義樣式=>import './css/common.css'; 
// common.css文件
.ml20{margin-left: 20px}

// jsx文件里使用
<span className=“ml20”>1</span>

頁面或者組件中引用模塊化私有樣式=>import style from './xxx.module.css'

// xxx.module.css文件
.red{color: red;}

// jsx里使用
<span className=“ml20”>1</span>
<span className={style.red}>2</span>