React项目中antd的按需引入与自定义主题

一.React中使用antd

1.下载antd包

npm i antd -S

2.按需引入

//App.jsx文件
import {Button} from 'antd' //引入按钮组件
import {WechatOutlined, ShoppingCartOutlined } from '@ant-design/icons'; //icon图标库需要另外引入
import 'antd/dist/antd.css' //引入antd的所有样式

3.使用组件

 1 export default class App extends Component {
 2     state = {
 3         size: 'large',
 4     };
 5 
 6     render() {
 7         return (
 8             <div>
 9                 App...
10                 <Button type="primary">Primary Button</Button>
11                 <button>点我</button>
12                 <Button type="primary" icon="search">
13                     Search
14                 </Button>
15                 <Button icon="search">Search</Button>
16                 <WechatOutlined />
17                 <Button type="primary" icon="download" size={this.state.size}>
18                 Download
19                 </Button>
20                 <ShoppingCartOutlined />
21           </div>
22         )
23     }
24 }

4.效果

二.修改react默认配置

打开一个react项目，我们看到的 create-react-app 生成的默认目录结构如下

没有webpack.config.js配置文件，因为项目为了防止我们胡乱修改导致项目崩溃，帮我们隐藏了。如果我们想要修改webpack.config.js文件该如何呢？

方法一：

直接执行 npm run eject

但是这样操作是不可逆的，对于熟悉webpack配置的人来说，可以随意按照自己的需求修改配置，可以这样操作，但是对于不了解webpack的小伙伴建议看第二种方法。

方法二：

1 下载react-app-rewired 和 customize-cra

yarn add react-app-rewired customize-cra
或者
npm i  react-app-rewired customize-cra

其中customize-cra 用于执行 config-overrides.js中的修改规则

当customize-cra修改config-overrides.js中的规则时，需要react-app-rewired 用于使用新规则（react-app-rewired 替换 react-scripts）启动脚手架，此时需要重新配置package.json文件（见第3步骤）

2.在项目根目录创建一个 config-overrides.js 用于修改默认配置。

1 //config-overrides.js
2 module.exports = function override(config, env) {
3   // do stuff with the webpack config...
4   return config;
5 };

在这个文件的方法中可以修改webpack配置，又不会破坏react项目的原有配置

3.修改package.json文件

1  "scripts": {
2     "start": "react-app-rewired start",
3     "build": "react-app-rewired build",
4     "test": "react-app-rewired test",
5     "eject": "react-scripts eject"
6   },

4.重新启动项目，配置即可生效

三.antd样式的按需引入

1.原因：项目中只是使用了antd中的部分组件，但是却加载了全部的 antd 组件的样式（gzipped 后一共大约 60kb），这样造成的结果是项目打包后体积过大，所以此时我们需要对 create-react-app 的默认配置进行自定义

2.按需引入操作：

说明：在基于上一节使用方法二修改webpack的基础上进行配置

2.1 安装babel-plugin-import ：是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

yarn add babel-plugin-import
或者
npm i  babel-plugin-import

2.2修改 config-overrides.js 文件

 1 const { override, fixBabelImports } = require('customize-cra');
 2 
 3 
 4  module.exports = override(
 5   fixBabelImports('import', {
 6      libraryName: 'antd',
 7     libraryDirectory: 'es',
 8      style: 'css',
 9    }),
10  );

2.3 移除前面在 src/App.jsx 里全量添加的 @import 'antd/dist/antd.css'; 样式代码

2.4 最后重启 yarn start 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的警告信息

这时你能发现没有在页面中手动引入样式，但是组件样式依然存在，正常显示。

四.自定义主题

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

1.下载安装less less-loader

yarn add less less-loader
或者
npm i  less less-loader

2.修改文件

 1 //配置具体的修改规则 
 2 //config-overrides.js
 3  const { override, fixBabelImports, addLessLoader  } = require('customize-cra');
 4  const themeColor = require('./theme-color-config') 
 5 
 6  module.exports = override(
 7     fixBabelImports('import', {
 8      libraryName: 'antd',
 9      libraryDirectory: 'es',
10      style: true,
11    }),
12    addLessLoader({
13     lessOptions:{
14         javascriptEnabled: true,
15         modifyVars: { ...themeColor },
16     }
17    }),
18  );

其中 theme-color-config.js文件也是位于根目录下的，主要用来配置具体的主题样式

1 //主题颜色配置
2 //theme-color-config.js
3 module.exports = {
4     '@primary-color': '#FF0000',
5     '@table-bg': '#FFC0CB',
6 }

可以参考配置主题文档配置。

3.最后npm run start重新启动项目即可

参考：https://3x.ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE

https://www.cnblogs.com/haimengqingyuan/p/13380508.html

按需引入——20221/2/22补充

有时候我们的create-react-app项目已经执行 npm run eject暴露config文件，这时我们应该如何按需引入呢？

首先，依然按照官网中的方法进行配制

其次，修改package.json文件结果如下：

 1 //package.json
 2 
 3 {
 4   ...
 5   "scripts": {
 6     "start": "node scripts/start.js",
 7     "build": "node scripts/build.js",
 8     "test": "node scripts/test.js"
 9   },
10   ......
11    "babel": {
12     "presets": [
13       "react-app"
14     ],
15     "plugins": [
16       [
17         "import",
18         {
19           "libraryName": "antd-mobile",
20           "style": "css"
21         }
22       ]
23     ]
24   },
25 ......
26 }

最后，npm run start重启项目即可

注意：重新启动后可能会出现有些包找不到的情况，重新下载对应的包，再重新启动即可

参考：https://blog.csdn.net/WangQing2508/article/details/109332958