react+antd:配置webpack,支持less及antd更換主題

使用"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,收工
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章