本地编译Sass/SCSS文件失败，排查后仍报错如何解决？

通用排查步骤 #

• 校验SASS版本兼容性
  旧版node-sass已停止维护，且和Node.js 16及以上版本存在兼容问题，建议统一替换为Dart Sass：
  执行npm uninstall node-sass -g && npm uninstall node-sass -D卸载所有旧版依赖，再执行npm install sass -D安装新版SASS。
• 检查SASS文件语法
  • 区分SASS变量和CSS原生变量：SASS变量前缀为$，CSS原生变量前缀为--，不要混淆两种变量的声明和调用语法。
  • 校验符号完整性：检查是否存在分号遗漏、括号/花括号未闭合的问题；如果使用.sass后缀的缩进语法，不要混用Tab和空格缩进。
• 确认编译命令和路径正确性
  单文件编译命令：sass 输入文件路径/xxx.scss 输出文件路径/xxx.css
  文件夹实时监听命令：sass --watch 输入文件夹路径:输出文件夹路径
  注意路径不要写错，大小写要和实际文件一致（Mac/Linux环境对路径大小写敏感）。
• 解决版本冲突问题
  执行sass --version查看全局SASS版本，执行npx sass --version查看项目本地SASS版本，两者不一致时建议统一使用项目本地版本，编译时加上npx前缀即可。
• 清除缓存重试
  执行npm cache clean --force清除npm缓存，删除项目下的node_modules文件夹、package-lock.json或yarn.lock文件，重新执行npm install安装依赖后再尝试编译。

截图报错专属解决方案 #

你截图中的报错核心是旧版SASS编译器不识别CSS原生变量的var()语法，完成上述版本替换操作后重新执行编译命令即可解决，无需修改SASS文件内的var()相关代码。

内容的提问来源于stack exchange，提问作者Kea-Nacolatabua