- 安装antd模块
npm install antd
- 按需加载需要安装的模块:
npm install react-app-rewired customize-cra babel-plugin-import
- 引用less需要安装的模块
npm install less less-loader
- 按需加载打包js模块配置:config-overrides.js
const {override,fixBabelImports,addLessLoader} =require(‘customize-cra‘);
module.exports = override(
// 针对antd 实现按需打包:根据import来打包 (使用babel-plugin-import)
fixBabelImports(‘import‘,{
libraryName:‘antd‘,
libraryDirectory:‘es‘,
style:true,//自动打包相关的样式 默认为 style:‘css‘
}),
// 使用less-loader对源码重的less的变量进行重新制定,设置antd自定义主题
addLessLoader({
javascriptEnabled: true,
modifyVars:{‘@primary-color‘:‘#1DA57A‘},
})
);
紧接着要修改修改packge.json 的配置文件
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react--app-rewired test",
"eject": "react-scripts eject"
},
- 引入自己写的.less文件到项目中,重新启动项目,npm run start,可能会报TypeError: this.getOptions is not a function相关的错误
原因:这个实际上就是 less-loader 的版本过高,不兼容 getOptions 函数方法,所以需要对 less-loader 进行降级处理
解决方法:通过 npm uninstall less-loader 命令卸载原版本的 less-loader,然后 通过 npm install less-loader@5.0.0 命令下载降级版本的 less-loader,这个问题就可以解决了
ant按需加载、配置config-overrides.js文件、项目中引入less、解决TypeError: this.getOptions is not a function错误