react中使用less，不用手动配置webpack。并包含TypeError: this.getOptions is not a function错误解决方法

前言：

我相信你们百度了很多教程叫你们去打开eject然后自己手动配置webpack，我试过很多次但最终还是失败了，不知道是我配错了还是咋地。后来发现了这个办法简单好用。

注意： 文章中引用包我都是用的yarn,你们用npm也是可以的

1.引入less和less-loader

yarn add less less-loader@5.0.0

注意： 这里解释一下为什么要指定less-loader@5.0.0版本，因为直接安装的是最高版本，但是会存在不兼容和没效果的情况，这个会在下面进行解释。

2.引入 react-app-rewired 并修改 package.json 里的启动配置

安装react-app-rewired

 yarn add react-app-rewired

修改package.json配置，也就是将react-scripts改成react-app-rewired

//改前：
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
//改后：
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

3.引入 customize-cra

由于新的 react-app-rewired@2.x版本的关系，你还需要安装 customize-cra。

 yarn add customize-cra

4.在项目根目录下新建config-overrides.js用于修改默认配置。

const { override, addLessLoader } = require("customize-cra");
module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
  })
);

最后，说一下less-loader版本过高会出现的情况：

情况一：

与antd不兼容，会报错如下

报错原因： 这个实际上就是 less-loader 的版本过高，不兼容 getOptions 函数方法，所以需要对 less-loader 进行降级处理
解决办法： 安装5.0.0版本的less-loader。如果你已经安装了高版本的就需要卸载重装，这也是为什么上边我让你们安装less-loader指定版本的原因

情况二：
没效果，安装了高版本的less-loader在项目中是用不了的，我这里说的高版本是@9.0.0因为我直接yarn add less-loader就是@9.0.0版本，是不行的，不知道其他版本行不行，这个没有研究了。

结束语：

好了！到这里你就能在你的项目中使用less了，比起自己去打开eject去配置webpack简单的多，有问题可以留言或私信。

有用的话请给个三连！！！
用的话请给个三连！！！
的话请给个三连！！！
话请给个三连！！！
请给个三连！！！
给个三连！！！
个三连！！！
三连！！！
连！！！
！！！
！！
！

标签：function,less,app,loader,react,scripts,rewired
来源： https://blog.csdn.net/qq_41732963/article/details/117535657