如何解决Node.js应用部署Digital Ocean时CSS transition语法报错问题

核心错误和transition属性无关，是CSS语法不规范导致的：
原生CSS仅支持/* 注释内容 */格式的块级注释，不支持JS风格的//单行注释。你代码里的// mobile bar height、// desktop bar height属于非标准语法，Digital Ocean的构建流程中的CSS解析器识别到非法语法后就会抛出错误，导致构建失败返回非0退出码。
transition是CSS3的标准属性，所有主流构建工具和现代浏览器都原生支持，不是本次错误的诱因。

方案1：替换注释格式保留动画效果 #

仅需将所有非标准的//单行注释替换为标准CSS注释即可，修改后的有效代码如下：

body {
    transition: padding-top .35s ease-in-out;
}

body.getsitecontrol-71519-open {
  padding-top: 176px; /* mobile bar height */
}

@media (min-width: 960px) {
  body.getsitecontrol-71519-open {
    padding-top: 88px; /* desktop bar height */
  }
}

该方案可完整保留你原本需要的页头padding平滑过渡动画效果，修改后即可正常构建部署。

方案2：删除过渡属性适配极简场景 #

如果你不需要平滑动画效果，也可以直接删除transition相关代码，仅保留padding设置即可：

body.getsitecontrol-71519-open {
  padding-top: 176px; /* mobile bar height */
}

@media (min-width: 960px) {
  body.getsitecontrol-71519-open {
    padding-top: 88px; /* desktop bar height */
  }
}

额外检查项 #

如果修改注释后仍有报错，可确认以下两点：

• 若你的项目使用Sass/LESS等CSS预处理器，确认构建配置中对应预处理器的解析规则正常开启
• 确认你添加CSS的文件是项目构建流程识别的有效样式文件，没有放错路径

内容的提问来源于stack exchange，提问作者Benjamin Kröni