Angular 8编译后多浏览器前缀CSS规则丢失问题求助

从你的描述和配置文件来看，问题出在Angular生产构建环节的CSS优化逻辑上——默认的cssnano优化可能误判了带浏览器前缀的background-image规则，或是Autoprefixer没有正确识别需要保留的前缀。下面是具体的解决方案：

1. 配置浏览器兼容列表（Browserslist） #

先在项目根目录创建.browserslistrc文件，明确指定需要兼容的浏览器版本，让Autoprefixer知道哪些前缀是必须保留的：

# 兼容主流浏览器最近2个版本
last 2 versions
# 兼容市场份额超过1%的浏览器
> 1%
# 兼容IE 11
IE 11

这个配置会避免Autoprefixer自动移除仍需兼容的旧浏览器前缀。

2. 调整Angular构建的CSS优化规则 #

修改angular.json中production配置下的optimization选项，自定义CSS优化逻辑，防止不同前缀的属性被误判为重复规则移除：

"configurations": {
  "production": {
    // ... 其他原有配置
    "optimization": {
      "scripts": true,
      "styles": {
        "minify": true,
        "inlineCritical": true,
        "cssnanoOptions": {
          "preset": [
            "default",
            {
              // 关闭重复属性移除功能，避免前缀规则被误删
              "discardDuplicates": false
            }
          ]
        }
      },
      "fonts": true
    },
    // ... 其他原有配置
  }
}

3. 验证Autoprefixer工作状态 #

Angular 8默认集成了Autoprefixer，若需要自定义配置，可在项目根目录创建postcss.config.js文件：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

这会确保Autoprefixer严格按照.browserslistrc的设置处理CSS前缀。

4. 检查CSS规则写法 #

确认你的CSS规则顺序正确：带前缀的属性放在标准属性之前，比如：

.cell-container {
  background-image: -webkit-linear-gradient(top, #fff, #eee);
  background-image: -moz-linear-gradient(top, #fff, #eee);
  background-image: -ms-linear-gradient(top, #fff, #eee);
  background-image: linear-gradient(to bottom, #fff, #eee);
}

标准属性放在最后，既保证现代浏览器优先使用标准规则，也能让旧浏览器识别前缀规则。

完成以上配置后，重新执行生产构建命令：

ng build --prod

此时编译后的CSS应该会保留所有带前缀的background-image规则了。

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