antd5分钟快速完成antd样式的按需引入以及自定义主题

Posted 2022-08-15 codeMak1r.小新

前言

😎😎欢迎来到我的博客😎😎
📔博主是一名大学在读本科生，主要学习方向是前端😊。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🤩
🛠目前正在学习的是🔥$React框架$🔥，中间夹杂了一些基础知识的回顾⌨️
🌈博客主页👉codeMak1r.的博客

😇😇本文目录😇😇

• 前言
• React UI组件库介绍
• antd样式按需引入
• antd样式自定义主题

本文被专栏【React–从基础到实战】收录

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

React UI组件库介绍

流行开源的React UI组件库：

国内	国外
ant Design	material-ui
ant-design官网	material-ui官网
ant-design（github）	material-ui（github）

antd样式按需引入

antd UI组件库在使用的过程中，组件是默认按需引入的：

import  Button, Rate  from 'antd';

从antd @V4开始，antd配套的icons图标库不集成在antd核心库中，如果需要使用antd配套的icons图标，需要另外安装图标组件包：

npm install --save @ant-design/icons

使用icons图标时也是默认按需引入的：

import  SearchOutlined, HeartOutlined  from '@ant-design/icons'

但是，官方默认的组件样式却是默认全部引入，使用时需要在组件中引入全部组件样式

import 'antd/dist/antd.css'; 
// or 'antd/dist/antd.less'

如果我们的组件中只需要使用到ant-design一小部分的组件，那么其他组件的样式是不是就浪费了呢，这样的话，浏览器编译css样式时，会出现首屏加载比较慢的情况。

我们需要做的就是将css样式也按需引入，这样的话，我们只引入我们使用到了的组件对应的样式，避免项目在浏览器上加载太慢。

1、首先我们要先安装依赖，

npm install react-app-rewired
npm install customize-cra
npm install babel-plugin-import

或

yarn add react-app-rewired
yarn add customize-cra
yarn add babel-plugin-import
yarn add less less-loader@5

2、修改package.json文件

...
"scripts":
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"

...

3、在项目根目录下创建文件config-overrides.js

// 配置具体的修改规则
const  override, fixBabelImports  = require('customize-cra');

module.exports = override(
  fixBabelImports('import', 
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  ),
);

4、备注⚠️，不要在组件中引入样式了，一切的配置都已经做好，不需要

import ‘antd/dist/antd.css’

我们删除引入全部样式的这行代码后，重新运行脚手架，发现样式并没有丢失，说明我们的按需引入已经实现了。

antd样式自定义主题

自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式，同时修改 config-overrides.js 文件。

customize-cra依赖库我们在进行样式的按需引入时已经安装过了，我们只需要安装less以及less-loader即可：

npm install less less-loader@5
或
yarn add less less-loader@5

修改config-overrides.js文件:

- const  override, fixBabelImports  = require('customize-cra');
+ const  override, fixBabelImports, addLessLoader  = require('customize-cra');

module.exports = override(
  fixBabelImports('import', 
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  ),
+ addLessLoader(
+   javascriptEnabled: true,
+   modifyVars:  '@primary-color': 'orange' ,
+ ),
);

这里利用了 less-loader 的 modifyVars 来进行主题配置，变量和其他配置方式可以参考 配置主题 文档。

修改后重启 npm start，如果看到一个橙色的按钮就说明配置成功了。

你也可以使用 craco 和 craco-antd 来实现和 customize-cra 一样的修改 create-react-app 配置的功能。

🎉🎉今天的小知识就分享到这里啦
如果觉得博主的文章还不错的话
可以给博主一个免费的关注，如果三连点赞👍收藏支持的话就更好了
✏️原创不易你的支持将会是我最大的动力💪
🧸感谢观看