由于 antd 升级到3.6.5后主要字体变为14px,不够精致，所以需要对主题进行修改。而且掌握修改方法后可以对颜色进行定制，而不局限于提供的蓝色系。但是官网给出的说明比较简单，漏了很多说明，参考社区其他实践，现在对主题修改进行一下总结。
1.升级 antd 到3.x
2.安装 babel-plugin-import 以只打包 antd 的样式
npm install babel-plugin-import --save-dev
3.安装 less-vars-to-js 用来把 less 文件转换为字符串并且返回一个对象
npm install less-vars-to-js --save-dev
4.less 保持在2.8以下，高版本会报错
5.安装 less-loader css-loader style-loader
6.配置 .babelrc
{ "presets": ["es2015", "stage-1", "react"], "plugins": [ "transform-runtime", "transform-decorators-legacy", ["import", { "libraryName": "antd", "style": true }] ]}复制代码
7.在 src 目录创建一个 .less 文件，这里来写你自己的样式用来覆盖 antd 的样式。
@primary-color:#C890ff;@font-size-base : 12px;@padding-lg : 16px; // containers@padding-md : 12px; // small containers and buttons@padding-sm : 8px; // Form controls and items@padding-xs : 4px; // small items
复制代码
8.配置 webpack
获取上一步的配置
const fs = require('fs');const themeVariables = lessToJs( fs.readFileSync(path.join(__dirname, './src/ant-theme-vars.less'), 'utf8'));复制代码
原来的 less-loader 配置不用动，新加一个 less-loader 配置
{ test: /.less$/, // antd 中的less include: path.resolve(__dirname, 'node_modules/antd'), //这个路径要写准确，否则报错 loaders: [ 'style-loader', 'css-loader', //编译less文件的loader并开启css-modules功能 `less-loader?{"modifyVars":${JSON.stringify(themeVariables)}}` ] },复制代码
另外webpack2.0配置语法稍有不同，具体语法参考官网。
转播
