React18配置Less时安装craco-less报错求助

问题定位 #

核心原因是 craco-less 与 @craco/craco、React18 的版本不兼容，引发依赖冲突。

解决步骤 #

1. 清理冲突依赖 #

先卸载已安装的 craco-less（若已安装）：

npm uninstall craco-less -D

2. 安装兼容版本 #

React18 搭配 @craco/craco v7+ 时，推荐安装适配的 alpha 版本：

npm install craco-less@2.1.0-alpha.0 -D

该版本专门适配 React18 环境，稳定性满足日常开发需求。

3. 修正配置文件 #

确保 craco.config.js 配置正确，示例如下：

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' }, // 可自定义主题变量
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

4. 验证运行 #

修改 package.json 中的启动命令：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

执行 npm start 启动项目，测试 Less 文件编译是否正常。

备选方案：换用 react-app-rewired 配置 #

若 craco 方案仍有问题，可切换为以下方式：

• 安装依赖：

npm install react-app-rewired customize-cra less less-loader -D

• 根目录创建 config-overrides.js：

const { override, addLessLoader } = require('customize-cra');

module.exports = override(
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { '@primary-color': '#1DA57A' },
    },
  })
);

• 更新 package.json 脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

内容的提问来源于stack exchange，提问作者xu Han