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

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

一、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配置進行覆蓋,感受多了一個配置不怎麼好。）


二、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>