你猜的没错，这个问题大概率和带透明度的颜色格式兼容性有关——Chrome DevTools对CSS语法的容错性和新特性支持都很宽松，但Gulp依赖的预处理器（比如Sass/Less）或者编译插件对语法规范的要求要严格得多。

给你几个具体的排查和解决思路：

• 检查颜色格式是否被预处理器支持
  如果你用的是#RRGGBBAA这种8位十六进制透明度格式（比如#00000080），部分旧版本的预处理器（比如老版node-sass）是不支持的，而Chrome已经原生支持了这种写法。这种情况你可以把8位十六进制转成标准的rgba()格式，或者升级预处理器到支持该语法的版本（比如node-sass v4.12.0及以后才支持8位十六进制颜色）。

• 确认Gulp编译插件的版本和配置
  比如你用gulp-sass的话，建议换成dart-sass作为依赖（现在Sass官方推荐的实现，对新CSS特性支持更完善），很多旧的node-sass版本对新颜色格式的支持确实有问题。你可以在项目里执行npm uninstall node-sass，然后npm install sass（dart-sass现在包名就是sass），再重新运行Gulp编译试试。

• 排查是否存在隐性语法错误
  有时候可能是颜色值的拼写问题，比如多打了一个字符、少了逗号（比如把rgba(0,0,0,0.5)写成rgba(0,0,0.5)），DevTools会自动纠错，但预编译阶段会直接抛出错误。你可以把那个出问题的颜色值单独复制到在线的Sass/Less编译工具里测试，看是否能正常解析。

举个实际的转换例子：如果你的问题颜色是#2ECC7180（带50%透明度的薄荷绿），可以转成rgba(46,204,113,0.5)，这样Gulp编译应该就能顺利通过了。

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