yarn add antd -S
高级配置
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系,还需要安装 customize-cra。
yarn add react-app-rewired customize-cra -S
在package.json中修改如下:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
4.1 按需加载组件
babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理)
yarn add babel-plugin-import
4.2 自定义antd组件主题以及使用less
yarn add less less-loader -D
这里利用了 less-loader 的 modifyVars 来进行主题配置
最后:安装完按需加载和主题、less的依赖包后,开始进行配置修改,
在根路径下新增一个config-overrides.js文件,代码如下:
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
// 按需加载antd组件
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
// 自定义主题和使用less
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
}
}),
);
注意:
如果是最新下载的脚手架create-react-app,react和相关依赖的版本会过高,导致安装使用less的时候一直出现报错。
将以下依赖包降级就ok啦。
"less": "^3.12.2",
"less-loader": "^6.2.0",
"react-scripts": "3.4.1"