配置craco，完成Antd按需导入组件样式和对less支持

使用@craco配置Antd

---

Ant Design官网中高级设置提到使用craco进行高级设置。但没有给出具体用法，官网如下：

以下是我结合craco的GitHub官方网站，总结下来的使用方法：

1. 使用插件（简单）

1.1 安装依赖

#版本限制
npm i @craco/craco@5.5.0 react-scripts@3.2.0
#使用craco插件，craco-antd
npm i craco-antd antd

1.2 配置

1. 在根目录创建craco.config.js 文件

2. 配置：

   //craco-antd插件包含 craco-less，babel-plugin-import
   const CracoAntDesignPlugin = require("craco-antd");
   module.exports = {
       plugins: [
           {
               plugin: CracoAntDesignPlugin
           }
       ]
   };
   

2. 手动配置

2.1 安装

npm i @craco/craco@6.2.0  #下载最新
npm i craco-less #less处理插件
npm i babel-plugin-import #自动导入antd的css样式

2.2 配置

1. 在根目录创建craco.config.js 文件

2. 配置：

   const CracoLessPlugin = require("craco-less");
   
   module.exports = {
       babel: {//支持装饰器
           plugins: [
               [
                   "import",
                   {
                       "libraryName": "antd",
                       "libraryDirectory": "es",
                       "style": 'css' //设置为true即是less 这里用的是css
                   }
               ]
           ]
       },
       plugins: [
           {
               plugin: CracoLessPlugin,
               options: {
                   // 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档
                   lessLoaderOptions: {
                       lessOptions: {
                           modifyVars: {},
                           javascriptEnabled: true
                       }
                   }
               }
           }
       ]
   }