Angular如何禁止将rgba()颜色值编译为#rrggbbaa格式

问题原因 #

Angular 12的构建流程默认使用cssnano工具完成CSS压缩优化，该工具的默认规则会将rgba()/hsla()格式的颜色值转换为长度更短的8位十六进制颜色（#rrggbbaa），而部分旧浏览器不支持该格式，就会出现样式失效问题。

解决方法 #

方法1：修改angular.json配置（无需额外依赖，推荐） #

直接修改项目根目录的angular.json文件，关闭CSS压缩中的颜色转换规则即可：

1. 定位到 projects > 你的项目名称 > architect > build > configurations > production 节点
2. 将原有的optimization配置修改为如下格式：

"optimization": {
  "scripts": true,
  "styles": {
    "minify": {
      "colors": false
    },
    "inlineCritical": true
  },
  "fonts": true
}

3. 如果需要开发环境也禁用该转换，同步修改architect > serve > configurations > development节点下的optimization配置即可。

修改完成后重新执行构建命令，生成的CSS文件就会保留原有的rgba()格式。

方法2：自定义PostCSS配置 #

如果方法1不生效，可以通过自定义PostCSS规则禁用颜色压缩：

1. 在项目根目录新建postcss.config.js文件，写入如下内容：

module.exports = {
  plugins: [
    require('cssnano')({
      preset: ['default', {
        colormin: false
      }]
    })
  ]
}

2. 重新执行构建命令即可生效。

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