标签：function less app loader react scripts rewired

前言：

我相信你们百度了很多教程叫你们去打开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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。