前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >技巧 - 快速定制生成 Ant Design 主题 CSS 文件

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

作者头像
JSCON简时空
发布2020-03-31 15:52:57
3.1K0
发布2020-03-31 15:52:57
举报
文章被收录于专栏:JSCON简时空

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

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 上克隆仓库:

代码语言:javascript
复制
git clone https://github.com/ant-design/ant-design.git

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

代码语言:javascript
复制
git checkout -b dev/3.19.5 3.19.5

3.2、编译仓库

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

代码语言:javascript
复制
cd ant-design 
npm install
npm run compile
npm run dist

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

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

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

3.3、生成自定义样式

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

代码语言:javascript
复制
@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 编译器(安装过的就直接跳过这一步):

代码语言:javascript
复制
npm install less -g

然后在命令行中执行:

代码语言:javascript
复制
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—

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-07-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 JSCON简时空 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、起因
  • 2、寻找方案
  • 3、具体步骤
    • 3.1、下载 Antd 仓库
      • 3.2、编译仓库
        • 3.3、生成自定义样式
        • 4、小结
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档