在ReactJS中配置Less遇错：'react-scripts'未被识别

看来你在配置Less的过程中，要么是把package.json里的scripts命令改坏了，要么是依赖安装出了问题，才导致react-scripts找不到的报错。别着急，咱们一步步来修复：

先搞清楚核心问题 #

这个报错最常见的几个诱因：

• 你提供的代码里start命令只写了"react-scripts s..."，明显是被截断了，命令不完整肯定会报错
• react-scripts依赖可能因为操作失误没安装完整，或者被误删了
• 修改package.json时不小心动了其他关键配置

具体修复步骤 #

1. 修正package.json的scripts命令 #

先把scripts恢复成正确的格式，结合你配置Less的需求，完整的scripts应该是这样的：

"scripts": {
  "build-css": "node-sass-chokidar src/ -o src/",
  "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
  "start": "npm run watch-css && react-scripts start",
  "build": "npm run build-css && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

重点：一定要把start命令补全，同时把Less的编译命令和原生的start/build命令串联起来，这样启动项目时会自动编译Less文件。

2. 确保所有依赖正确安装 #

有时候修改配置或中断安装会导致依赖缺失，执行下面的命令重新安装所有依赖：

npm install

如果还是提示react-scripts找不到，手动单独安装它：

npm install react-scripts --save

3. 清除缓存并重启项目 #

缓存偶尔会引发奇怪的问题，执行以下命令清除npm缓存后再重启项目：

npm cache clean --force
npm start

额外提示：更简洁的Less配置方案 #

如果你觉得用node-sass-chokidar太繁琐，现在可以用craco来更稳定地配置Less，步骤更简单：

• 先安装所需依赖：

  npm install @craco/craco craco-less --save-dev
  

• 在项目根目录创建craco.config.js文件：

  const CracoLessPlugin = require('craco-less');
  
  module.exports = {
    plugins: [
      {
        plugin: CracoLessPlugin,
        options: {
          lessLoaderOptions: {
            lessOptions: {
              modifyVars: { '@primary-color': '#1DA57A' }, // 这里可以自定义Less全局变量
              javascriptEnabled: true,
            },
          },
        },
      },
    ],
  };
  

• 修改package.json里的scripts：

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

这种方式不需要手动维护Less编译命令，配置起来更省心。

内容的提问来源于stack exchange，提问作者Mark Gerryl Mirandilla