从官方给出的示例中我们可以得知，antd中js的加载是自动按需加载的。而对于css的加载则只字未提
js按需加载，如图所示：
image.png
此时你大概会怀念vue中对于webpack的配置，然后我从网上找了大量的教程，基本都是告诉你要将配置项暴露出来进行修改
$ npm run eject
运气不好的话会有很多报错，像这样
image.png
还有这样
image.png
看着成篇的webpack配置有没有很头疼，完全不知道应该修改哪行，有木有？脚手架的功能就是想让我们即使不知道如何配置webpack，也能让webpack用起来爽歪歪，如此方法，则不得不使我们回头去学webpack的配置，然而我在接下来的文档中找到了答案，如图所示：
image.png
查看原文档
好了，正文开始，对于使用react-app创建项目和引入antd的过程，此处不做赘述
1、安装craco
$ yarn add @craco/craco
/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}
2、安装
$ yarn add babel-plugin-import -D
3、新建配置文件craco.config.js
4、文件配置内容如下
module.exports = {
babel: {
plugins: [
['import', { libraryName: 'antd', style: true }],
]
},
};
5、如果要结合less配置，可参照antd官网,下面给出完整配置
$ yarn add craco-less
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { "@primary-color": "#1DA57A" },
javascriptEnabled: true,
},
},
},
},
],
babel: {
plugins: [
['import', { libraryName: 'antd', style: true }],
]
},
};
大功告成，在此感谢@古天凰、antd官网
对于以下报错，可将React-app严格模式注销，即可解决。
image.png
修改index.js，如下所示
ReactDOM.render(
// <React.StrictMode>
<App />,
// </React.StrictMode>,
document.getElementById('root')
);
