技巧 - 快速定制生成 Ant Design 主题 CSS 文件

温馨提示：因微信中外链都无法点击，请通过文末的 “阅读原文” 到技术博客中完整查阅版；

1、起因

因为项目的缘故，Antd 的样式 CSS 文件通过 link 标签引入，而该项目又要求自定义 Antd 的主题样式。

我首先想到的能否直接去官网能否直接定制并下载 CSS 文件。

然而答案是 否定 的。

作为业界优秀的开源项目，Antd 提供了自定义定制主题样式的方法（在官网 定制主题 就有详细的说明）然而 Antd 却只提供了 LESS 样式定制的功能，并没有提供现成的生成 CSS 样式文件定制并下载的功能。

2、寻找方案

自定义 CSS 样式主题的需求估计并不是我自己独有的，所以 就先到网上找找是否有现成的解决方案 。

利用关键字 antd theme css custom 搜索一番，还真找到几篇有用的文章（见文末参考文档）。随后经过本人的总结和实践，就有了本文介绍的定制生成 Antd 主题 CSS 样式文件的方法。大致思路如下：

1. 先下载官方 github 仓库，然后切换到稳定版本的分支
2. 执行打包命令获取官方标准的 LESS 主文件
3. 随后自定义一份 LESS 文件，引入该主文件后，根据需求指定的样式变量进行覆盖
4. 利用 lessc 工具最终编译出所需要的 CSS 文件

整个流程简单易操作，并且灵活度高，接下来我们具体展开看一下具体操作步骤和过程。

3、具体步骤

3.1、下载 Antd 仓库

从官方 github 上克隆仓库：

git clone https://github.com/ant-design/ant-design.git

随后从指定稳定版本（比如 3.19.5）所在的分支切出临时用的新分支（比如这里使用 dev/3.19.5,可自己随意）：

git checkout -b dev/3.19.5 3.19.5

3.2、编译仓库

由于官方源码中的 LESS 文件比较分离，我们最好直接拿打包后的文件来做定制化。执行命令进行打包：

cd ant-design 
npm install
npm run compile
npm run dist

打包之后会生成 dist 和 lib 这两个文件夹：

打包之后会生成两个文件夹

其中 dist 目录中包含 antd.less 样式主入口文件，我们只要针对它进行操作即可。

3.3、生成自定义样式

首先到 dist 文件夹下创建名为 my-theme.less （文件名自己随意起一个）文件，引入 antd.less 文件，然后在之后将想要覆盖的样式变量重新定义即可：

@import "./antd.less";   // Import Ant Design styles by less entry

@primary-color: #d228e9;                         // primary color for all components
@link-color: #1890ff;                            // link color
@success-color: #52c41a;                         // success state color
@warning-color: #faad14;                         // warning state color
@error-color: #f5222d;                           // error state color
@font-size-base: 40px;                           // major text font size
@heading-color: rgba(0, 0, 0, .85);              // heading text color
@text-color: rgba(0, 0, 0, .65);                 // major text color
@text-color-secondary : rgba(0, 0, 0, .45);      // secondary text color
@disabled-color : rgba(0, 0, 0, .25);            // disable state color
@border-radius-base: 4px;                        // major border radius
@border-color-base: #d9d9d9;                     // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15);  // major shadow for layers

Antd 中具体的 LESS 主题变量参考 官方文档

万事俱备只欠东风，最后一步就是安装 LESS 编译器，将该自定义文件编译成 CSS 文件即可。

安装 LESS 编译器（安装过的就直接跳过这一步）：

npm install less -g

然后在命令行中执行：

lessc --js my-theme.less result.css

生成的 result.css 就是最终的我们想要的自定义 CSS 样式文件了，放到你所需要的项目中即可。

4、小结

从上可看到整个过程一次就能上手，后续想要生成另外一份定制的 CSS 文件就更简单了：

1. 修改自定义的 my-theme.less 文件中的样式变量
2. 执行 lessc --js my-theme.less result.css

上述仅仅是描述了生成 CSS 样式的方法，不过我怎么能先预览覆盖样式变量后 Antd 的主题模样呢？

不用担心，网上有人做了，有个很好用的线上预览工具 Antd Live Theme: https://antd-live-theme.firebaseapp.com/ ，可直接预览修改主题样式变量后的效果。

搭配本文所述的方法，就能分分钟就搞定 Antd 自定义 CSS 主题样式的需求了。

REFERENCE

参考文档

• antd live theme：在线工具，可以预览样式更改后的 antd ，相应说明文章参考 Ant Design , Live Theme
• Simple way of modifying Ant Design default theme：快捷方式生成自定义的 antd 的 css 格式的主题文件

—END—