运行npm run watch-css遇单位不兼容错误，nodemon崩溃求助

执行npm run watch-css时出现如下错误：

{
  "status": 3,
  "message": "Incompatible units: '%' and 'rem'.",
  "formatted": "Internal Error: Incompatible units: '%' and 'rem'.\n"
}
[nodemon] app crashed - waiting for file changes before starting...

错误原因 #

这个错误是SCSS编译器在尝试直接对百分比（%）和rem单位进行算术运算时抛出的——这两种单位属于不同的度量体系，无法直接进行加减乘除计算。哪怕你没手动修改代码，也可能是依赖包自动更新、缓存残留，或者之前隐藏的语法问题被触发导致的。

解决方法 #

• 定位冲突代码：全局搜索所有SCSS文件，找到同时包含%和rem的运算语句，比如误写的width: 100% - 2rem（没有用calc()包裹）。
• 用CSS calc()包裹混合运算：不同单位的运算必须用calc()来处理，SCSS会直接保留这个语法到最终CSS，不会尝试内部计算，示例：

  // 错误写法
  width: 100% - 2rem;
  // 正确写法
  width: calc(100% - 2rem);
  

• 清除编译缓存：如果确认代码没问题，可能是缓存残留导致的旧代码干扰，执行以下命令：

  rm -rf node_modules/.cache
  npm run watch-css
  

• 回退依赖版本：检查package.json中sass或node-sass的版本，若最近有自动更新，可能是新版本的语法校验更严格，回退到之前稳定版本：

  npm install sass@1.69.0 --save-dev
  

内容的提问来源于stack exchange，提问作者Daniela Pilessa