我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第2篇文章,点击查看活动详情
1.为什么要自定义antd
虽然日常业务开发、我们大都使用Antd进行业务开发,使用Antd原因,因为组件丰富,能够基本满足我们日常的业务开发场景,且生态良好,有大厂背书。
但尽管如此,再好看的ui,也是人家阿里的标准,每个公司总会有自己的ui,总会有自己的一套ui标准,为此,我们希望能够定制antd
,甚至依托于antd
进行二次创作,也就是样式复写。
但是复写样式会造成很多问题,好在,antd
官网提供了一套解决方案供我们实现,来定制属于自己公司的antd
。
2. 如何自定义antd
主题
根据antd
官方介绍以及源码查阅,我们可以得知,antd
使用less
,并且其定义了一系列全局/组件的样式变量(实操后虽然有些不全),但已经把常用的变量已经暴露出来供我们修改,如果缺少你想要定制的变量名,antd
也提出可以提issue
。
具体暴露了哪些变量,我们可以点击antd主题变量查阅。
我们根据官网查阅得知:定制方式原理上是使用 less
提供的 modifyVars 的方式进行覆盖变量。
光说不练假把式,下面我们来看下具体如何实现,代码是如何体现的。
3. 实际操作
我们首先看官网的demo:
webpack版本:
// webpack.config.js
module.exports = {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'less-loader', // compiles Less to CSS
+ options: {
+ lessOptions: { // 如果使用less-loader@5,请移除 lessOptions 这一级直接配置选项。
+ modifyVars: {
+ 'primary-color': '#1DA57A',
+ 'link-color': '#1DA57A',
+ 'border-radius-base': '2px',
+ },
+ javascriptEnabled: true,
+ },
+ },
}],
}],
}
一目了然,正应了前面说的,使用less提供的modifyvars
,来改变antd
暴露出来的变量名的默认值来实现我们主题的定制化。
当然官网在这里也提醒了:
注意:
less-loader
的处理范围不要过滤掉 node_modules
下的 antd 包。
lessOptions
的配置写法在 less-loader@6.0.0 里支持。
craco版本
因为我司使用的是craco
进行项目初始化,并不是直接使用webpack
,官网仍然有给提供解决方案。
点击查看
我们一起来看下官网的demo!!! 根据官网的demo,我将此过程分为三个步骤:
1.样式文件后缀替换,我们将需要将样式文件修改为.less
结尾的
/* src/App.js */
- import './App.css';
+ import './App.less';
2.入口文件引用样式文件替换,将引用样式文件替换为.less
结尾的
/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
3. craco.config.js
配置添加
我们首先需要安装一下对应的plugin
yarn add craco-less
具体配置
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
};
参考webpack
版本的,两者其实都差不多的,都是依赖前面提到了modifyvars
,毕竟craco
底层也是webpack
;
到目前为止,原生webpack
和craco
两种解决方案就此实现,antd
官网也解释的很清楚,根据官网进行配置肯定可以实现,其他解决方案,如umi
;
以及官网提供了
配置 less 变量文件
建立一个单独的 less
变量文件,引入这个文件覆盖 antd.less
里的变量。
@import '~antd/es/style/themes/default.less';
@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
但是这种解决方案,无法实现按需加载,我想应该也不会有太多人使用吧!!!
4.如何更好的定制自己的主题
看了前文,想必肯定都已经知道了如何实现antd
的主题自定义,但如何更好的实现、或者更有意义呢,这里我提供了我在实现公司业务的解决方案,仅供参考!!!
1. 沟通
我们要清楚自定义antd
主题的原因,大了说是符合公司的ui规范,小了说就是让ui同学满意,更快更准确的实现ui稿。所以我们在进行主题自定义时,一定要先和ui同学沟通。在和ui同学沟通后,基于ui同学提供的标准,来实现antd
主题自定义。
2. 封装
一般的公司ui标准,可能不会有很多套,但一定会有多个项目共同遵守这套ui规范。为此,推荐能够将ui规范相关的配置进行封装,可以产出一个内部的npm
包,用来管理这套规范。
甚至如果有系统级的组件样式的复写,也推荐放到这个npm
包中,统一维护起来。推荐只要是大的样式,涉及到ui规范的,都可以封装到一个包里,方便维护,既实现了公司的ui规范,又减少了自己的工作量。
想象一下,如果某天ui同学找到了,说我们的ui规范要变更,如果你是统一封装,产出在一个npm
包中,我们仅仅需要改动很少的东西,就可以带来大的产出。
3. 宣讲
在技术实现以后,要记得宣讲、推广,让所有的相关同学知道,ui、前端,共同创建,共同维护。
只有所有的相关负责人都知道后,才会遵守,并自觉共创,这样自定义antd
主题才会有意义,才能发挥最大的价值!!!
总结
做每件事都要有它的价值,尤其是做技术,功利性要强一点,既然要做,就一定要发挥最大的价值!
在自定义antd
主题,产出对应主题包之前,每次开发,需要进行大量的antd
样式复写,非常痛苦,费时费力;
在有了对应的主题包并投入使用之后,前端能够更多的投入到其他方面,对于基本的antd
的样式,再也不需要关注了,ui同学的样式走查也更加顺畅了!
如果有什么写的不对的地方,欢迎指正!!!
如果有想要一起探讨的,欢迎光临!!!