Angular 6迁移至12版本开启optimization后CSS Minimizer Plugin告警

Angular 12版本中optimization: true时会默认启用css-minimizer-webpack-plugin对所有CSS类资源进行压缩，你遇到的告警核心原因是存放在assets目录下的SCSS源文件未经过Sass编译，直接被送入CSS压缩工具处理，压缩工具无法识别SCSS专属语法（比如$变量、嵌套规则等），因此抛出语法错误。
Angular 6版本的构建逻辑不会对assets下的非CSS资源执行压缩，所以同一份代码之前没有告警。

• 方案1：调整资源存放路径
  把需要编译的SCSS源文件从assets目录移出，放到项目的源码目录（比如/src/styles/），并将这些SCSS文件添加到angular.json的projects.[你的项目名].architect.build.options.styles数组中，Angular构建会自动完成Sass编译→CSS压缩的流程，不会出现语法识别错误。
  assets目录仅用来存放无需编译的静态资源（比如编译后的CSS、图片、字体文件等）。

• 方案2：配置SCSS文件排除规则
  如果必须将SCSS源文件保留在assets目录，可通过自定义Webpack配置排除SCSS文件的压缩逻辑：

  1. 你已经安装了@angular-builders/custom-webpack，在angular.json中关联自定义Webpack配置文件
  2. 在自定义Webpack配置中添加如下规则，让CSS压缩工具跳过所有SCSS文件：

  const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
  
  module.exports = {
    optimization: {
      minimizer: [
        new CssMinimizerPlugin({
          exclude: /\.scss$/,
          // 如果有兼容旧IE hack的需求（比如你代码里的*background-color写法），可以添加以下配置
          minimizerOptions: {
            preset: ['default', { legacy: true }]
          }
        })
      ]
    }
  }
  

• 方案3：修改angular.json的assets过滤规则
  如果不需要把SCSS源文件输出到构建后的dist目录，可以在angular.json的assets配置中添加排除规则，避免SCSS文件被复制到构建产物中，自然不会被压缩工具检测到：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    {
      "glob": "**/*.scss",
      "input": "src/assets/",
      "output": "/",
      "ignore": true
    }
  ]
  

注：你代码中*background-color是旧版IE的属性前缀hack，开启CSS压缩工具的legacy: true配置即可解决该语法告警。

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