Angular 7中SCSS重复属性被移除，如何保留以实现跨浏览器兼容？

问题原因 #

你遇到的是Angular构建流程中的CSS优化机制导致的问题：默认情况下，生产环境构建时使用的cssnano工具会将重复的CSS属性判定为冗余内容并移除，但带-webkit-、-moz-、-o-等浏览器前缀的属性是为不同浏览器提供兼容的必要声明，并非冗余。

解决方法 #

方法1：调整CSS优化配置，禁用重复属性移除 #

修改angular.json中对应环境的构建配置，细化CSS优化规则，阻止cssnano丢弃重复属性：

1. 找到projects.default-app.architect.build.configurations.production下的optimization选项
2. 将原有的"optimization": true替换为以下配置：

"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": true,
    "cssnano": {
      "preset": [
        "default",
        {
          "discardDuplicates": false
        }
      ]
    }
  },
  "fonts": true
}

这样既保留CSS压缩等优化，又会保留所有浏览器前缀版本的属性。

方法2：使用Autoprefixer自动生成前缀（推荐） #

手动编写浏览器前缀繁琐且易出错，使用Autoprefixer可以自动根据目标浏览器版本生成所需前缀，无需手动维护多个属性：

1. 安装依赖：

npm install autoprefixer postcss-loader @angular-builders/custom-webpack@7 --save-dev

2. 项目根目录创建postcss.config.js：

module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: [
        "last 2 versions",
        "ie >= 11"
      ]
    })
  ]
};

3. 创建webpack.config.js：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['postcss-loader']
      }
    ]
  }
};

4. 修改angular.json的构建配置：
   • 将architect.build.builder改为@angular-builders/custom-webpack:browser
   • 将architect.serve.builder改为@angular-builders/custom-webpack:dev-server
   • 在build.options中添加customWebpackConfig配置：

"customWebpackConfig": {
  "path": "./webpack.config.js"
}

5. 简化SCSS代码，只写标准属性：

.teststyle{
    background: #a64bf4;
    background: linear-gradient(right, #6ab443, #04a95f, #00d421);
}

构建时Autoprefixer会自动生成所有需要的浏览器前缀属性，且不会被优化工具误删。

方法3：使用Sass属性数组语法（应急方案） #

如果不想修改构建配置，可以使用Sass的属性数组语法强制输出多个属性：

.teststyle{
    background: #a64bf4;
    background: [
        -webkit-linear-gradient(right, #6ab443, #04a95f, #00d421),
        -o-linear-gradient(right, #6ab443, #04a95f, #00d421),
        -moz-linear-gradient(right, #6ab443, #04a95f, #00d421),
        linear-gradient(right, #6ab443, #04a95f, #00d421)
    ];
}

该写法会让Sass将数组中的每个值作为独立的background属性输出，避免被优化工具识别为冗余重复。

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