這是本人踩了無數(shù)坑驹尼，試錯(cuò)，總結(jié)出一套 步驟清晰，操作簡便 關(guān)于antd的自定義主題的通用解決方案腰根！希望能幫助在這方面有困惑的同學(xué)。
隨著antd2.0的到來（感謝開發(fā)組的杰出工作）拓型，包括本人在內(nèi)的前端對(duì)antd自定義主題的需求越來越迫切额嘿，然而如何給antd自定義主題，截至筆者寫這篇分享也沒有找到一篇文章能把這個(gè)看似簡單的問題說明白透徹的劣挫！
包括官網(wǎng)給出的自定義主題文檔也是讓人看的云里霧繞岩睁。由于本人自配腳手架，所以這里介紹 如何結(jié)合webpack為antd定義主題揣云。
總共四步：
-
首先捕儒，你的項(xiàng)目里需要安裝依賴
babel-plugin-import less less-loder。(當(dāng)然邓夕，style-loader css-loader這些最基礎(chǔ)的樣式依賴肯定也是要有的)npm install --save-dev babel-plugin-import less less-loder -
其次刘莹，在你項(xiàng)目中的
.bablrc文件中需要有以下配置{ ... "plugins": [ ["import", {"libraryName": "antd-mobile", "style": true}], ... ] } -
再次，在
package.json文件中添加一個(gè) theme 字段焚刚，里面將包含所有我們想要修改的主題樣式点弯。全部主題樣式參考這里{ ... "theme": { "brand-primary": "red", "color-text-base": "#333"， ... }, ... } -
最后矿咕，在你的 webpack （建議版本3.0+） 配置文件里抢肛，添加如下配置，之后運(yùn)行
npm start碳柱，看到驚喜了嗎捡絮？const pkg = require('./package.json') module.exports = { ... module: { ... rules: [ ... { test: /\.css$/, use: [ 'style-loader', 'css-loader', ], }, { test: /\.less$/, use: [ 'style-loader', 'css-loader', {loader: 'less-loader', options: {sourceMap: true, modifyVars: pkg.theme}}, ], include: /node_modules/, }, ... ], }, ... }
另外，如果你同時(shí)也想在antd2.0中使用高清方案莲镣，由于antd2.0去除了對(duì)高清方案的支持福稳，需要我們需要對(duì)其做下適配處理，操作很簡單瑞侮，在前面主題配置的第三步中的圆，在 theme 字段中修改hd變量為 0.02rem 即可。
{
...
"theme": {
"hd": "0.02rem",
"brand-primary": "red",
"color-text-base": "#333",
...
},
...
}
后話：如果你想對(duì)高清方案有更多了解半火，歡迎訪問本人寫的這篇博客越妈，此文中筆者對(duì)高清源碼稍作修改，使該方案能靈活適用于百度地圖這類特殊場景钮糖。
