1. 安装
yarn add antd
2.antd的按需引入+自定主题
2.1 安装依赖:
yarn add react-app-rewired customize-cra babel-plugin-import less@3.12.2 less-loader@7.1.0
(这里安装less和less-loader指定版本是因为现在安装的less和less-loader版本较高,配置完会报错)
2.2 修改package.json
scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" },
2.3 根目录下创建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': 'green' }, } }), );
2.4 备注:不用在组件里亲自引入样式了,即:import 'antd/dist/antd.css'应该删掉