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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Mina入门实例
继续上一篇,这篇主要讲通过mina往B端发送消息。并接受消息,mina是一个网络通信框架,封装了javaNIO。简单易用。网上有非常多关于他的介绍,在此不赘述了。
全栈程序员站长
2022/07/10
5780
Apache MINA框架「建议收藏」
Apache MINA(Multipurpose Infrastructure for Network Applications) 是 Apache 组织一个较新的项目,它为开发高性能和高可用性的网络应用程序提供了非常便利的框架。当前发行的 MINA 版本支持基于 Java NIO 技术的 TCP/UDP 应用程序开发、串口通讯程序(只在最新的预览版中提供),MINA 所支持的功能也在进一步的扩展中。目前正在使用 MINA 的软件包括有:Apache Directory Project、AsyncWeb、AMQP(Advanced Message Queuing Protocol)、RED5 Server(Macromedia Flash Media RTMP)、ObjectRADIUS、Openfire 等等。
全栈程序员站长
2022/07/25
9240
Apache MINA框架「建议收藏」
使用mina解析http协议的使用
在使用mina的过程中,我们通常会自定义各种报文,以使用于自己的业务。今天就为大家带来一款类似http协议的解码过程。 mina有自带的解析http数据包的解码类。可以使用maven配置一下内容获取源码:
业余草
2019/01/21
1.2K0
java使用mina和websocket通信
这里以mina整合springMVC为例: //springMVC的配置: <!-- mina --> <bean class="org.springframework.beans.factory.config.CustomEditorConfigurer"> <property name="customEditors"> <map> <!-- spring升级后此配置已失效 会报错 <entry key="java.net.SocketAddr
用户1215919
2018/02/27
4.5K1
用MINA实现UDP通信的例子
Apache Mina Server 是一个网络通信应用框架,也就是说,它主要是对基于TCP/IP、UDP/IP协议栈的通信框架(当然,也可以提供JAVA 对象的序列化服务、虚拟机管道通信服务等),Mina 可以帮助我们快速开发高性能、高扩展性的网络通信应用,Mina 提供了事件驱动、异步(Mina 的异步IO 默认使用的是JAVA NIO 作为底层支持)操作的编程模型。
麦克劳林
2018/09/11
1.6K0
Spring4.0MVC学习资料,ApplicationContext中的方法详解(三)
做为java开源的一部分,spring框架一直排在老大的位置。Spring4.0 是 Spring 推出的一个重大版本升级,进一步加强了 Spring 作为 Java 领域第一开源平台的地位。Spring4.0 引入了众多 Java 开发者期盼的新特性,如泛型依赖注入、SpEL、校验及格式化框架、Rest风格的 WEB 编程模型等。这些新功能实用性强、易用性高,可大幅降低 JavaEE 开发的难度,同时有效提升应用开发的优雅性。为了方便开发,Spring的ApplicationContext类,给我们提供了很多实用的方法,我在这里进行一下讲解。
业余草
2019/01/21
4260
Apache Mina开发手册
Apache Mina是一个网络应用框架,简化用户开发高性能、高可扩展性的网络应用程序的难度。Mina提供了一个抽象的事件驱动的异步API,通过Java NIO实现各种传输协议如TCP/IP和UDP/IP。
星哥玩云
2022/07/03
1.5K0
Apache Mina开发手册
java mina框架实例_MINA框架简介和一个简单的例子
MINA(Multipurpose Infrastructure for Network Applications)是用于开发高性能和高可用性的网络应用程序的基础框架。通过使用MINA框架可以可以省下处理底层I/O和线程并发等复杂工作,开发人员能够把更多的精力投入到业务设计和开发当中。MINA框架的应用比较广泛,应用的开源项目有Apache Directory、AsyncWeb、Apache Qpid、QuickFIX/J、Openfire、SubEthaSTMP、red5等。MINA框架当前稳定版本是1.1.6,最新的2.0版本目前已经发布了M1版本。
全栈程序员站长
2022/07/25
1.5K0
NIO框架Mina学习
前言: 找了篇文章看了看,nio框架数Mina用的最多! 代码: 服务端: package com.mina; import java.net.InetSocketAddress; import java.nio.charset.Charset; import org.apache.mina.core.service.IoAcceptor; import org.apache.mina.core.session.IdleStatus; import org.apache.mina.filte
JQ实验室
2022/02/09
5940
Spring4.0MVC学习资料,简单学习教程(一)
Spring框架的核心部分就是Ioc容器,而Ioc控制的就是各种Bean,一个Spring项目的水平往往从其XML配置文件内容就能略知一二,很多项目,往往是外包公司的项目,配置文件往往是乱七八糟,抱着能跑就行,不报错就行的态度去写,然后在项目中后期发现各种缺失又去一通乱补,其结果就是,整个文档可读性极差,毫无章法。这也不能怪写这个XML的人,拿着苦逼程序员的工资干着架构师的工作必然是这个结果。为了程序员的幸福,我认为有必要来一套简单快速的官方文档核心配置归纳整理和解释,好让苦逼猿们在工作中能正确快速的提高自身和项目的整体水平。
业余草
2019/01/21
3970
Spring4.0MVC学习资料,简单学习教程(一)
Mina框架的使用[通俗易懂]
每建立一个Socket连接时,同时创建一个新线程对该Socket进行单独通信(采用阻塞的方式通信)。这种方式具有很高的响应速度,并且控制起来也很简单,在连接数较少的时候非常有效,但是如果对每一个连接都产生一个线程的无疑是对系统资源的一种浪费,如果连接数较多将会出现资源不足的情况。
全栈程序员站长
2022/08/01
1.5K0
Mina框架的使用[通俗易懂]
mina框架学习
mina框架是对nio进行的一个封装,可用于java的网络编程,包括TCP/IP和UTP/IP编程,主要屏蔽了网络通信的一些细节,对socket进行封装,并且是用nio的一个实现框架,mina的主要类如下:
全栈程序员站长
2022/07/22
1.2K0
不会框架不要紧,我带你自定义框架
前言:这标题说的有点大了,当一回标题党,之前在学JSP的时候提到了JSTL和EL表达式,由于一直钟情于Servlet,迟迟没有更新别的,这回算是跳出来了。这回放个大招,用Spring+SpringMVC+Spring Jdbc Template,实现一个增删改查加分页,但重点不在这,我的重心在于JSTL和EL表达式,标题虽然有点大,但话糙理不糙,我真的是要自定义框架,当然,这个框架可大可小,大的我不敢说,用JSTL自定义标签封装个分页还是可以的,也算补上JSTL和EL表达式的学习吧。对于那些一直跟着我跟新博客脚步的朋友,我提醒你们不要着急,你要是好奇就可以先试着跟着我的案例试试手,不要看到SSM框架就说还没学,不会啥的,哈哈,开玩笑,都没学怎么可能会呢,我说了,这篇的重点在于JSTL和EL表达式,重要的话说了不下三遍了,至于附加的SSM,我会持续跟新,会手把手带你理解的,别急,别急,就当先认识一下SSM吧。
泰斗贤若如
2019/08/06
5660
不会框架不要紧,我带你自定义框架
破解md5加密的方法
我们知道md5加密是不可逆转的,但是要破解md5的加密也很简单。 网上也有很多在线的破解。既然是不可逆转的,那么网上的那些破解是怎么来的呢? 原因很简单,就是使用穷举法来进行破解。 如:我们计算出键盘上所有字符的组合的md5,将加密前后的字符串分别存入数据库中; 然后拿你的md5加密后的字符串进行查询得出加密前的字符串。这就是在线破解的奥秘。 但是这种破解方法也有局限性。如:我对单一一个字符串进行多次的md5加密,那么我们破解就要反复的进行穷举。 如果你不知道字符串被md5加密了多少次,那么就要反复的多试几次了。当然一般的网站使用的md5加密的密码不会太复杂。 我们就可以使用我今天所讲的这种方法来破解了。 1.首先我们要找出键盘上所有的字符,存入数组中,如下:
业余草
2019/01/21
4.4K0
netty案例,netty4.1基础入门篇九《自定义编码解码器,处理半包、粘包数据》
在实际应用场景里,只要是支持sokcet通信的都可以和Netty交互,比如中继器、下位机、PLC等。这些场景下就非常需要自定义编码解码器,来处理字节码传输,并控制半包、粘包以及安全问题。那么本章节我们通过实现ByteToMessageDecoder、MessageToByteEncoder来实现我们的需求。
小傅哥
2020/07/14
5320
netty案例,netty4.1基础入门篇九《自定义编码解码器,处理半包、粘包数据》
NIO框架入门(二):服务端基于MINA2的UDP双向通信Demo演示
NIO框架的流行,使得开发大并发、高性能的互联网服务端成为可能。这其中最流行的无非就是MINA和Netty了,MINA目前的主要版本是MINA2、而Netty的主要版本是Netty3和Netty4(Netty5已经被取消开发了:详见此文)。
JackJiang
2018/08/23
9080
NIO框架入门(二):服务端基于MINA2的UDP双向通信Demo演示
MINA 框架简介「建议收藏」
Apache Mina Server 是一个网络通信应用框架,也就是说,它主要是对基于TCP/IP、UDP/IP协议栈的通信框架(然,也可以提供JAVA 对象的序列化服务、虚拟机管道通信服务等),Mina 可以帮助我们快速开发高性能、高扩展性的网络通信应用,Mina 提供了事件驱动、异步(Mina 的异步IO 默认使用的是JAVA NIO 作为底层支持)操作的编程模型。Mina 主要有1.x 和2.x 两个分支,这里我们讲解最新版本2.0,如果你使用的是Mina 1.x,那么可能会有一些功能并不适用。学习本文档,需要你已掌握JAVA IO、JAVA NIO、JAVASocket、JAVA 线程及并发库(java.util.concurrent.*)的知识。
全栈程序员站长
2022/07/22
1.8K0
mybatis扩展之自定义类型处理器处理枚举类型
全局配置: <typeHandlers> <typeHandler handler="com.gong.mybatis.typeHandler.MyEnumEmpStatusTypeHandler" javaType="com.gong.mybatis.bean.EmpStatus"/> <!-- <typeHandler handler="org.apache.ibatis.type.EnumOrdinalTypeHandler"
西西嘛呦
2020/08/26
7530
mybatis扩展之自定义类型处理器处理枚举类型
SpringBoot 配置文件详解
配置文件的作用 : SpringBoot底层都给我们配置好了,但有时候我们需要修改一些默认配置。
jwangkun
2021/12/23
2900
Java XML和JSON:Java SE的文档处理 第2部分
本文中的示例将向您介绍JSON-B,JSON绑定API for Java。在快速概述和安装说明之后,我将向您展示如何使用JSON-B来序列化和反序列化Java对象,数组和集合; 如何使用JSON-B自定义序列化和反序列化; 以及如何在序列化或反序列化期间使用JSON-B适配器将源对象转换为目标对象。
银河1号
2019/05/16
3.6K0
相关推荐
Mina入门实例
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验