公司日常业务开发中,我是如何基于antd定制属于自己的主题

1,836 阅读5分钟

我报名参加金石计划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

到目前为止,原生webpackcraco两种解决方案就此实现,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同学的样式走查也更加顺畅了!

image.png

如果有什么写的不对的地方,欢迎指正!!!

如果有想要一起探讨的,欢迎光临!!!

资源参考

ant-design.gitee.io/docs/react/…

github.com/ant-design/…

lesscss.org/usage/#usin…