Vue2 + Webpack 老项目启动报错Vue2 + Webpack 老项目启动报错：Node Sass 版本不兼容

Vue2 + Webpack 老项目启动报错：Node Sass 版本不兼容问题以及vue-qr库版本问题排查与解决

记录一次 Vue CLI 2.x 老项目本地运行时的 sass-loader 版本冲突问题，以及完整的解决思路。

最近接手一个 Vue2 + Webpack 的老项目（mall-admin-web），执行 npm run dev 启动本地开发服务器时，控制台疯狂报错：

Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

报错截图：

从报错堆栈可以看到几个关键信息：

这是一个典型的依赖版本不匹配问题：

依赖项	当前版本	期望版本	问题
node-sass	6.0.1	^4.0.0	版本过高
sass-loader	10.x	未知	可能与 node-sass 不兼容

Node Sass 的版本与 Node.js 版本有严格的对应关系：

而 sass-loader 也有对应的版本要求：

如果你的 Node.js 版本在 14 以下，直接降级 node-sass：

# 卸载当前版本
npm uninstall node-sass

# 安装 4.x 版本
npm install node-sass@4.14.1 --save-dev

如果项目允许调整 webpack 配置，可以升级 sass-loader 以兼容高版本 node-sass：

# 查看当前 sass-loader 版本
npm list sass-loader

# 升级到兼容版本
npm install sass-loader@10.4.1 --save-dev

Node Sass 已被官方弃用，建议迁移到 Dart Sass：

# 卸载 node-sass
npm uninstall node-sass

# 安装 sass（Dart Sass 的 npm 包名）
npm install sass --save-dev

注意：Dart Sass 的语法更严格，可能需要调整部分 SCSS 代码。

有时候依赖冲突太复杂，最简单粗暴的方法就是：

# 1. 删除依赖和锁文件
rm -rf node_modules
rm package-lock.json

# 2. 清除 npm 缓存
npm cache clean --force

# 3. 重新安装
npm install

# 4. 启动项目
npm run dev

这个方法虽然笨，但对付老项目的依赖混乱问题往往最有效。

在 package.json 中使用精确版本：

{
  "devDependencies": {
    "node-sass": "4.14.1",
    "sass-loader": "8.0.2"
  }
}

# 创建 .nvmrc 文件
echo "14.21.3" > .nvmrc

# 团队成员使用 nvm 切换
nvm use

对于长期维护的老项目，建议逐步迁移到 Vite：

无截图大致就是

报错You may need an appropriate loader to handle this file type

降低vue-qr库的版本 npm install -s vue-qr@3.2.4

老项目的依赖问题就像技术债，迟早要还。如果项目还要长期维护，建议尽早规划迁移到现代工具链。

参考链接：

如果这篇文章对你有帮助，欢迎点赞收藏～有问题也可以在评论区交流！