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

前言

** 😎😎欢迎来到我的博客😎😎**
**📔博主是一名大学在读本科生，主要学习方向是前端😊。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🤩
🛠目前正在学习的是🔥

      R
     
     
      e
     
     
      a
     
     
      c
     
     
      t
     
     
      框架
     
    
    
     React框架
    
   
  React框架🔥，中间夹杂了一些基础知识的回顾⌨️

🌈博客主页👉codeMak1r.的博客**

😇😇本文目录😇😇

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

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

React UI组件库介绍

流行开源的React UI组件库：
国内国外ant Designmaterial-uiant-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 配置的功能。

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