React设置antd3x自定义主题，TypeError: this.getOptions is not a function的解决方法

提示：主要使用：react-app-rewired 和 customize-cra实现antd3x版本自定义主题

---

问题

报错图片

---

分析：

1. 由于引入less-loader(第三方库)时，默认下载该库的最新版本。【 可能看到该文章时，版本已经高于8.0.0了】
2. antd3x版本的文档发布至今多年，疏于维护，更不上less-loader版本的更新。
3. antd3x版本的文档仅支持：^5.0.0大版本下的所有版本
4. less-loader的8.0.0版本要求lessOptions属性设置为函数，而antd3x文档中传入的是对象。

---

解决方案1：降低版本

1. 先卸载less-loader当前版本： yarn remove less-loader
2. 再安装7.0.0左右的版本：yarn add less-loader@7.1.0
3. 在config-overrides.js配置文件中设置对应的属性

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：使用craco库

1. 使用craco库修改create-react-app的默认配置
2. 下载：yarn add @craco/craco craco-less
3. 修改package.json文件中的scripts属性

js">"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

4. 创建craco.config.js配置文件修改默认配置

js">const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': 'red' }, // 修改主题颜色
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};