Ant Design 3.X 主题修改

由于 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配置语法稍有不同，具体语法参考官网。