在React项目（create-react-app）中引入less（不使用eject）

官方的 create-react-app创建的项目默认是不支持 less 的，要想使用less，一般需要先暴露（eject）出webpack配置文件，然后进行修改，但这种情况是不可逆的）

eject之后的缺点

• 无法升级 react-scripts

  CRA 与其他脚手架不同的另一个地方，就是可以通过升级其中的react-scripts包来升级 CRA 的特性。比如用老版本 CRA 创建了一个项目，这个项目不具备 PWA 功能，但只要项目升级了react-scripts包的版本就可以具备 PWA 的功能，项目本身的代码不需要做任何修改。

  但如果我们使用了eject命令，就再也享受不到 CRA 升级带来的好处了，相当于放弃了跟 CRA 共同进步的机会, 自己维护一套config；因为react-scripts 已经是以文件的形式存在于你的项目，而不是以包的形式，所以无法对其升级。

• 暴露业务无关内容 执行eject之后暴露出来的代码包复杂度增加，而且大部分是与业务逻辑无关的配置。项目维护时要更加小心。

用craco重写配置

craco是一个对 create-react-app 进行自定义配置的社区解决方案

现在我们安装 craco 并修改 package.json 里的 scripts 属性。

$ yarn add @craco/craco

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

然后安装 craco-less 并修改 craco.config.js 文件如下。

$ yarn add craco-less

然后在项目根目录创建一个 craco.config.js 用于修改默认配置。

const CracoLessPlugin = require('craco-less');
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin
    },
  ],
};