antd 学习1

1. 安装

yarn add antd

2.antd的按需引入+自定主题

2.1 安装依赖：

yarn add react-app-rewired customize-cra babel-plugin-import [email protected] [email protected]

（这里安装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'应该删掉