Laravel Vue项目执行npm run dev报SassError: Undefined function错误如何解决

问题根因 #

你遇到的编译报错核心是版本不匹配问题：math.div()是Dart Sass v1.33.0版本才正式加入的内置函数，你当前本地安装的sass版本为1.32.13，低于该最低版本要求，无法识别该函数，因此触发编译失败。

网传的修改package-lock.json中sass的resolved链接的方案完全不对症，该方案仅用于解决依赖包下载失败的问题，对你当前的版本不兼容问题没有任何作用，无需尝试。

可行修复步骤 #

• 升级sass到满足要求的稳定兼容版本，这里推荐使用经过大量项目验证的1.58.3版本，避免新版本出现其他兼容问题：

npm install sass@1.58.3 -D

• 删除本地旧的依赖文件和缓存：
  • 删除项目根目录下的node_modules文件夹、package-lock.json文件
  • 执行命令清除npm本地缓存：npm cache clean --force
• 重新安装全部项目依赖：

npm install

• 重新执行开发命令验证修复效果：

npm run dev

可选兼容处理 #

如果升级sass后出现和sass-loader版本不兼容的报错，可以同步将sass-loader升级到适配版本：

npm install sass-loader@10.4.1 -D

之后重新执行npm run dev即可。

内容的提问来源于stack exchange，提问作者Istiak Mahmood