在webpack自定義配置antd的按需加載和修改主題色

最近使用antd來作react項目的UI。從antd官網上，在使用create-react-app腳手架搭建項目時步驟以下：

（1）添加模塊 react-app-rewired, babel-plugin-import, react-app-rewire-less

（2）根目錄添加config-overrides.js

（3）修改npm script便可， 一切正常

參考官網

 

這裏主要說的是自建的react項目中如何配置及其容易出現的坑

1、按需加載

　　（1）在.babelrc中添加plugins (這裏也能夠在babel-loader的options中添加)

1 ['import', { 
2     libraryName: 'antd', 
3     libraryDirectory: 'es',
4     style: 'css' 
5     }
6 ]

　　注意該步很容易有報錯：

.bezierEasingMixin();Inline JavaScript is not enabled. Is it set in your options?

此時檢查package.json中看看less的版本是不是3.x, 若是時降爲less@2.7.3
再重啓項目，搞定。

 

2、修改主題色

找到webpack.config.js的less-loader， 在options中添加

 1 {
 2      loader: 'less-loader',
 3      options: {
 4         sourceMap: true,
 5         modifyVars: {
 6            'primary-color': '#1DA57A',
 7            'link-color': '#1DA57A',
 8            'border-radius-base': '2px'
 9          },
10      javascriptEnabled: true   // 此項不能忘
11   }
12 }

此處有個坑，以前使用ExtractTextPlugin插件對css樣式提取，但如配置主題色修改，不能再使用提取插件，另外，找到.babelrc中找到以前按需加載的配置修改：

1 ['import', { 
2      libraryName: 'antd', 
3      style:  true
4      }
5 ]

刪除以前的 libraryDirectory: 'es',

修改以前的 style: "css" 爲 style: true

修改主題是基於less提供的modifyVars變量進行修改的，因此按需加載時使用true

主題定製

 

新版create-react-app腳手架中修改antd主題配置

(1) 引入UI庫

 

 _{注意，這裏import後面是一個對象，而不是數組}

 (2) 添加less的正則

 

(3) 在sass規則後面添加less規則

 

 

 (4) 修改getStyleLoaders方法

 

 改爲

 

 注意less版本還需使用2.7.3

重啓項目,完成修改。