如何为antd-mobile自定义主题

这是本人踩了无数坑，试错，总结出一套 步骤清晰，操作简便 关于antd的自定义主题的通用解决方案！希望能帮助在这方面有困惑的同学。

随着antd2.0的到来（感谢开发组的杰出工作），包括本人在内的前端对antd自定义主题的需求越来越迫切，然而如何给antd自定义主题，截至笔者写这篇分享也没有找到一篇文章能把这个看似简单的问题说明白透彻的！

包括官网给出的自定义主题文档也是让人看的云里雾绕。由于本人自配脚手架，所以这里介绍 如何结合webpack为antd定义主题。

总共四步：

1. 首先，你的项目里需要安装依赖 babel-plugin-import less less-loder 。(当然，style-loader css-loader这些最基础的样式依赖肯定也是要有的)

   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",
          ...
      },
      ...
  }

后话：如果你想对高清方案有更多了解，欢迎访问本人写的这篇博客，此文中笔者对高清源码稍作修改，使该方案能灵活适用于百度地图这类特殊场景。