一、安装antd

npm install antd

二、实现antd的按需打包

  • 为什么要实现按需打包？
    • 因为直接引入antd，会引入很多我们不需要的包，造成空间上的浪费。
  1. 引入相关工具包
npm install react-app-rewired customize-cra babel-plugin-import
  1. 在项目根目录下创建一个配置文件（config-overrides.js）
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    })
);
  1. 修改package.json
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

三、实现antd自定义主题

  1. 下载工具包
npm install less less-loader
npm install less-loader@7.3.0 --save-dev
  1. 修改config-overrides.js
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: { '@primary-color': 'aqua' },
        }
    }),
);
  1. 下面的这句代码要注释掉
    项目中引入Ant Design_自定义