Ant Design css按需加载的正确流程

antd中的css样式引入时，是引入了整个文件，若不配置按需加载，会增大项目内存，导致加载缓慢及一系列问题。

特别提示：craco.config.js和declaration.d.ts这两个文件必须放在根目录下，否则按需加载将无法成功配置

antd中的css按需加载一共分为六步

第一步：下载antd

npm install antd(yarn add antd)

第二步;引入antd以及less文件

import 'antd/dist/antd.less';
import React from 'react'
import { Button} from 'antd';

export default function App() {
  return (
    <Button type="primary">
        Primary
      </Button>
  )
}

第三步：下载craco 并修改 package.json 里的 scripts 属性，创建craco.config.js文件。

npm i @craco/craco --legacy-peer-deps   
（官网下载为npm i @craco/craco,这样下载的版本会与react-scripts的版本起冲突，所以导致无法下载）

​
/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

​

第四步：下载craco-less,用于更改主题等配置

npm i -S craco-less --force  

第五步：修改craco.config.js文件

const CracoLessPlugin = require('craco-less');（极易出现无法找到该模块的错误）

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '' },
            javascriptEnabled: true,
        
          },
        },
      },
    },
  ],
};

第六步：创建declaration.d.ts文件

declare module 'craco-less';
（若不配置该文件以及上述代码，就无法解决引入craco-less中出现的无法找到该模块的报错）

自定义主题，需要建立一个单独的 less 变量文件，引入这个文件覆盖 antd.less 里的变量。