我报名参加金石计划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同学的样式走查也更加顺畅了！
如果有什么写的不对的地方，欢迎指正！！！
如果有想要一起探讨的，欢迎光临！！！
