Ant Design主题定制

先介绍下项目背景：

如果是采用antd-init或antd-cli脚手架初始化的项目，可以直接设置theme，相对比较简单。我的项目框架是React+Redux，采用Webpack打包，在开发环境是用

webpack-dev中间件配合webpack-hot中间件运行项目与内存中访问，不在项目本地生成dist文件夹，生产环境是分模块打包项目生成模板访问。

其实Ant Design主题定制比较龌龊的方法可以直接在其提供的less文件改动，这样可以看到效果，不过这样破坏性太强。所以我们可以在webpack打包时配置，

利用less-loader的modifyVars可以替换theme中primary-color：

develop：

{

      test: /\.less$/,
      loader: 'style!css!postcss!less?{modifyVars:{"@primary-color":"#1DA57A"}}'
 }

production：

{
      test: /\.less$/,
      loader: ExtractTextPlugin.extract('css!postcss!less?{modifyVars:{"@primary-color":"#1DA57A"}}')
}