一、安装antd
npm install antd
二、实现antd的按需打包
- 为什么要实现按需打包？
- 因为直接引入antd，会引入很多我们不需要的包，造成空间上的浪费。
- 引入相关工具包
npm install react-app-rewired customize-cra babel-plugin-import
- 在项目根目录下创建一个配置文件（config-overrides.js）
const { override, fixBabelImports } = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css', }) );
- 修改package.json
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" },
三、实现antd自定义主题
- 下载工具包
npm install less less-loader npm install less-loader@7.3.0 --save-dev
- 修改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' }, } }), );
- 下面的这句代码要注释掉
