下载组件库包

yarn add antd

使用craco对create-react-app进行自定义配置

1. yarn add @craco/craco
   

2. 根目录创建craco.config.js文件

   /* craco.config.js */
   module.exports = {
     // ...
   };
   

3. 更改package.json

   "scripts": {
       "start": "craco start",
       "build": "craco build",
       "test": "craco test",
       "eject": "react-scripts eject"
     },
   

实现按需打包

1. yarn add babel-plugin-import
   

2. craco.config.js添加

   babel:{  
       plugins: [
         [   
           "import", 
           {
             "libraryName": "antd",
             "libraryDirectory": "es",
              "style": true //设置为true即是less
            }
        ]
       ]
    }
   

实现自定义主题

1. yarn add craco-less
   

2. craco.config.js添加

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