Sass错误将rgba函数转为十六进制值，问题成因是什么？

• 在Nuxt 3（版本3.0.0-rc.8）的Vue组件导入的SASS文件中编写如下代码：

.page {
  background-color: rgba(0, 0, 0, 0.87);
}

• 执行命令 nuxt generate 后，转换得到的CSS输出为：

.page {
  background-color: #000000de;
}

• 预期输出应为保留原rgba()格式：

.page {
  background-color: rgba(0, 0, 0, 0.87);
}

• 补充：opacity属性无法完全替代rgba()，例如在box-shadow: 0 -0.1rem 0.4rem rgba(0, 0, 0, 0.5) inset;这类场景中。

这是因为Nuxt 3默认集成的PostCSS配置中，启用了颜色转换相关的插件（比如postcss-preset-env或cssnano的优化规则），这类插件会自动将rgba()格式的颜色转换为更紧凑的十六进制RGBA格式（#RRGGBBAA）。虽然两种格式视觉效果完全等价，但不符合预期的代码格式。

另外，Nuxt 3 3.0.0-rc.8作为候选版本，其默认CSS处理配置可能未提供足够精细的自定义开关，或者你的项目配置中没有禁用该颜色转换规则。

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