使用"create-react-app": "^3.0.1"
創建的app,主要依賴:
"antd": "^3.19.1",
"axios": "^0.18.0",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-dev-utils": "^9.0.1",
"react-dom": "^16.8.6",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
(1) 爲了使項目能使用less,先用npm run eject
暴露webpack配置,webpack.config.js
中增加less文件的打包規則,仿照本身存在的sass規則,先定義正則匹配的變量:
(2) 在rules
中增加less的規則:
嘗試啓動npm start,報錯
這裏安裝一下less模塊就可以正常啓動了。
(3)接下來使用antd要求按需加載,官網提供的方法是使用 react-app-rewired
來增加配置,但我已經把webpack配置都暴露出來了,所以手動更改下。
首先還是要安裝babel-plugin-import
,這是一個用於按需加載組件代碼和樣式的 babel 插件,然後在webpack.config.js
中增加以下配置:
start一下,ok又報錯了(╥╯^╰╥)
(4)查到一個 => issue,是less版本的問題,降到[email protected]
的版本可以正常運行,也有解決方法是開啓 less-loader 配置項javascriptEnabled: true
,我選擇了後一種方法。在處理 loaders 的函數getStyleLoaders
中增加 option 配置,單獨對 less-loader 做處理爲了給後面的更換主題做準備(大佬們有更好的寫法請留言啊,Ծ‸Ծ,)
接下來npm start
成功
(5)ok讓我們來嘗試下更改主題,官網中的方法
結合之前自己的配置修改了一下type="primary"
的按鈕的顏色,
結果完全ojbk,收工