Rails部署Heroku时资产预编译失败：SassC::SyntaxError报错

问题原因 #

SassC会把CSS原生的min()函数误识别为Sass内置的min()函数。Sass内置的min()仅接受纯数值（如650px），不支持calc()这类动态表达式；而开发环境预编译时Sass解析规则更宽松，不会触发严格校验，因此本地开发环境无报错，但生产环境（包括Heroku）的严格编译逻辑会抛出语法错误。

另外你找不到目标代码，是因为这段CSS大概率来自第三方依赖（比如npm包、Rails UI组件gem），或是webpack等构建工具编译后的产物，并非直接存放在项目源码的CSS/Sass文件中。

解决方案 #

1. 修正Sass对CSS min()的解析逻辑 #

若能定位到代码位置，将min()的写法修改为让Sass识别为CSS原生函数的形式：

• 方法一（推荐，Sass 3.5+支持）：给函数名加后缀.，明确调用CSS原生函数

  max-height: min.(650px, calc(100vh - 110px));
  

• 方法二：用Sass插值语法，将calc()部分包裹为纯字符串输出

  max-height: min(650px, #{calc(100vh - 110px)});
  

2. 定位代码来源 #

如果找不到代码位置，可通过以下方式排查：

• 搜索node_modules目录：

  grep -r "min(650px,calc(100vh - 110px))" node_modules/
  

• 搜索Rails gem的assets目录：先列出所有gem，再逐个检查

  bundle list
  bundle show [gem名称]  # 替换为疑似包含该代码的gem，如UI组件类gem
  

• 预编译时保留临时文件：设置环境变量RAILS_ASSETS_CLEAN=false后执行预编译，查看tmp/assets目录下的临时文件，找到对应编译前的源文件

3. 临时绕过方案 #

若暂时无法定位代码，可通过CSS变量间接实现，避免Sass解析calc()：

:root {
  --content-max-height: calc(100vh - 110px);
}
/* 在需要的位置使用 */
max-height: min(650px, var(--content-max-height));

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