Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >技巧 - 快速定制生成 Ant Design 主题 CSS 文件

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

作者头像
JSCON简时空
发布于 2020-03-31 07:52:57
发布于 2020-03-31 07:52:57
3.1K00
代码可运行
举报
文章被收录于专栏:JSCON简时空JSCON简时空
运行总次数:0
代码可运行

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

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
代码运行次数:0
运行
AI代码解释
复制
git clone https://github.com/ant-design/ant-design.git

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
git checkout -b dev/3.19.5 3.19.5

3.2、编译仓库

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
cd ant-design 
npm install
npm run compile
npm run dist

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

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

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

3.3、生成自定义样式

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@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
代码运行次数:0
运行
AI代码解释
复制
npm install less -g

然后在命令行中执行:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
『Ant Design』主题定制
进阶玩法是什么内容呢?其实就是『Ant Design』的主题定制,那么什么是主题定制呢?简单来说就是我们可以通过修改『Ant Design』的样式变量来定制我们自己的主题,这样就可以让我们的项目看起来更加炫酷,更加符合我们的审美。
杨不易呀
2024/01/28
8441
『Ant Design』主题定制
文稿:Ant Design从无到有,带你体悟大厂前端开发范式
•微信公众号 《JavaScript全栈》•掘金 《合一大师》•Bilibili 《合一大师》
合一大师
2020/07/20
2.4K0
文稿:Ant Design从无到有,带你体悟大厂前端开发范式
Ant Design Vue自定义主题失效解决办法
antd 的样式使用了 Less 作为开发语言,并定义了一系列全局/组件的样式变量,可以根据需求进行相应调整 。
房东的狗丶
2023/02/17
1.4K0
Ant Design 是怎么管 Icon 的?
Ant Design 的 Icon,是在"确定"和"自然"的设计价值观影响下的一套美观、一致、易用、便于延展的图标体系;
WEBJ2EE
2019/07/19
4.8K0
Ant Design 是怎么管 Icon 的?
react+antd 使用脚手架动态修改主题色
最近做了一个需求,后台管理系统添加一个可以动态修改ant-design主题色。查询了大多数的文章,发现基本都是抄来抄去,而且文章记录的也一点也不详细。刚刚把这个功能做完了,顺便记录一下如何去修改主题色。主要使用到的包是antd-theme-generator。使用起来非常方便,而且在热更新时,不会出现 js 内存爆栈现象。
冬夜先生
2021/09/05
2.3K0
Ant Design 4.0 发布,来看看如何升级?
Ant Design 4.0 正式版于 2 月 28 日提前发布,本文将帮助你从 antd 3.x 版本升级到 antd 4.x 版本。
ConardLi
2020/03/02
6.2K0
Ant Design 4.0 发布,来看看如何升级?
React + TS + Ant Design 裁包小记
前段时间做了一个项目,是使用 Create-React-App 脚手架 + TypeScript + Ant Design 组件库搭建的,在减少包体积上有一些方法和大家分享一下。我们目标是将包体积降到几十 k 这样一个级别上,不受限于包体积,坦然使用框架。
iPlus26
2018/07/18
3.7K0
React + TS + Ant Design 裁包小记
ant-design-vue运行时动态切换主题色
由于ant-design-vue的样式使用的是less作为开发语言,所以这里我们选择Less
青年码农
2020/10/13
6.2K0
ant-design-vue运行时动态切换主题色
Ant Design 按钮和图标的使用
同样的方法继续点击 “button”,就能一层一层看到具体是怎么写的。如果想深入了解可以看一看。
用户4793865
2023/02/03
2.7K0
Ant Design 4.0 正式版来了!
我们在 SEE Conf 之际发布了 4.0 rc 版本。经过 1 个多月的反馈收集和调整之后,我们终于迎来了 4.0 的正式版!感谢在此期间每一位提供反馈、建议以及贡献的人。我们会结合 rc 版本已经涉及的更新以及一些比较重要的新增内容于此进行列举。完整的更新文档可以点击此处[1]。v4 文档地址:https://ant.design[2]
前端达人
2020/03/13
3.4K0
【Vue】组件ant design of vue
error The “HelloWorld” component has been registered but not used vue/no-unused-components
瑞新
2021/12/06
9450
【Vue】组件ant design of vue
React 入门学习(十三)-- antd 组件库的基本使用
在我们学习JavaScript 的时候,我们学习了一个 bootstrap 的组件库。可以让我们快速开发,但是我们现在学习了 React ,一种组件化编程方式,很少说会去贴大量的 HTML 代码,再配一下 CSS,JS。我们也有一些现成的组件库可以使用,我们只需要写一个组件标签即可调用。这让我们 React 开发变得十分的快速,方便和整洁。
小丞同学
2022/11/15
2.7K0
React 入门学习(十三)-- antd 组件库的基本使用
基于Vue的前端架构,我做了这15点
为什么选择了两个?因为公司团队跟倾向于使用 scss 开发,less 是为了覆盖 ant design vue 的样式,stylus 只有我自己喜欢这种风格。
落落落洛克
2021/01/08
2.7K0
基于Vue的前端架构,我做了这15点
vue引入各类ui库 原
本身集成并没有vue的部分,我们采用的方式是把ui-css部分拿来使用,js效果自己用jquery写到methods里
晓歌
2018/12/20
6.4K0
vue引入各类ui库
                                                                            原
快速学习Ant Design-布局
antd布局:https://ant.design/components/layout-cn/ 在后台系统页面布局中,往往是经典的三部分布局,像这样:
cwl_java
2020/02/14
3.4K0
React---antd的按需引入和自定义主题
1.安装依赖:npm install react-app-rewired customize-cra babel-plugin-import less less-loader antd
半指温柔乐
2021/04/29
2.6K1
为什么说 90% 的前端不会调试 Ant Design 源码?
写 react 项目的小伙伴应该都用过 antd 组件库,但绝大多数同学并没有看过它的源码。
神说要有光zxg
2022/11/11
1.3K0
为什么说 90% 的前端不会调试 Ant Design 源码?
记Ant Design Vue Modal组件的使用及踩的坑
最近在使用 Vue 开发一个项目,前端框架用的 Ant Design ,Ant Design for React 已经比较成熟,兼容性和灵活性也比较高。但是 Ant Design for Vue 貌似还有点不那么完善。
德顺
2019/11/26
23.7K1
记Ant Design Vue Modal组件的使用及踩的坑
类型即正义:TypeScript 从入门到实践(序章)
因为需要尽可能全且精炼的讲解 TypeScript 语法知识,所以我们需要一个恰到好处的实战项目,这一小节主要是用于讲解我们准备初始 TypeScript 版本的 React 项目代码的过程,在下一个小节中我们将会结合 React 项目代码,真正开始 TypeScript 语法的讲解。
一只图雀
2020/04/15
1.6K0
类型即正义:TypeScript 从入门到实践(序章)
Ant Design Vue 使用
Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库,用于开发和服务于企业级中后台产品。
王小婷
2021/11/24
1.6K0
Ant Design Vue 使用
相关推荐
『Ant Design』主题定制
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验