這是本人踩了無數(shù)坑，試錯，總結(jié)出一套 步驟清晰，操作簡便 關(guān)于antd的自定義主題的通用解決方案！希望能幫助在這方面有困惑的同學(xué)。

隨著antd2.0的到來（感謝開發(fā)組的杰出工作），包括本人在內(nèi)的前端對antd自定義主題的需求越來越迫切，然而如何給antd自定義主題，截至筆者寫這篇分享也沒有找到一篇文章能把這個看似簡單的問題說明白透徹的！

包括官網(wǎng)給出的自定義主題文檔也是讓人看的云里霧繞。由于本人自配腳手架，所以這里介紹 如何結(jié)合webpack為antd定義主題。

總共四步：

1. 首先，你的項目里需要安裝依賴 babel-plugin-import less less-loder 。(當(dāng)然，style-loader css-loader這些最基礎(chǔ)的樣式依賴肯定也是要有的)

   npm install --save-dev babel-plugin-import less less-loder
   

2. 其次，在你項目中的.bablrc文件中需要有以下配置

   {
       ...
       "plugins": [
           ["import", {"libraryName": "antd-mobile", "style": true}],
           ...
       ]
   }
   

3. 再次，在 package.json 文件中添加一個 theme 字段，里面將包含所有我們想要修改的主題樣式。全部主題樣式參考這里

   {
       ...
       "theme": {
           "brand-primary": "red",
           "color-text-base":  "#333"，
           ...
       },
       ...
   }
   

4. 最后，在你的 webpack （建議版本3.0+） 配置文件里，添加如下配置，之后運行 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/,
               },
               ...
           ],
       },
       ...
   }
   

另外，如果你同時也想在antd2.0中使用高清方案，由于antd2.0去除了對高清方案的支持，需要我們需要對其做下適配處理，操作很簡單，在前面主題配置的第三步中，在 theme 字段中修改hd變量為 0.02rem 即可。

  {
      ...
      "theme": {
          "hd": "0.02rem",
          "brand-primary": "red",
          "color-text-base":  "#333",
          ...
      },
      ...
  }

后話：如果你想對高清方案有更多了解，歡迎訪問本人寫的這篇博客，此文中筆者對高清源碼稍作修改，使該方案能靈活適用于百度地圖這類特殊場景。