ant按需加载、配置config-overrides.js文件、项目中引入less、解决TypeError: this.getOptions is not a function错误

本文介绍了如何在项目中安装和配置Ant Design按需加载，包括使用`npm install`安装相关模块，配置`config-overrides.js`以实现按需打包和自定义主题。同时，针对遇到的`TypeError: this.getOptions is not a function`错误，文章详细解释了该错误产生的原因，并提供了降级`less-loader`版本的解决方案，确保项目正常运行。

安装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错误