Angular7升级至12成功后theme文件夹出现SCSS警告如何解决

Angular 12 构建流程默认引入Css Minimizer Plugin做CSS压缩，你存放在assets目录下的SCSS文件没有经过Sass编译环节，被压缩插件直接当做原生CSS处理。SCSS专属的嵌套选择器、$变量等语法在原生CSS规范中不存在，因此触发大量语法警告。

按优先级从高到低选择适配方案：

• 调整angular.json assets配置，排除SCSS文件
  assets数组默认会将匹配到的资源原封不动复制到构建产物目录，不会触发编译。将SCSS文件从assets匹配规则中移除即可避免未编译的SCSS被送去压缩：

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

• 把主题SCSS文件加入styles编译队列
  如果你需要将主题SCSS编译为CSS后仍放在assets/themes目录下使用，可以在angular.json的styles数组中单独配置每个主题文件的编译规则：

  "styles": [
    "src/styles.scss",
    {
      "input": "src/assets/themes/sita-rtl.scss",
      "inject": false,
      "bundleName": "assets/themes/sita-rtl"
    },
    {
      "input": "src/assets/themes/Product-themes.scss",
      "inject": false,
      "bundleName": "assets/themes/Product-themes"
    }
  ]
  

  配置说明：

  • inject: false：禁止自动将编译后的CSS插入到index.html头部
  • bundleName：指定编译后的CSS文件输出路径，构建后会自动生成对应.css文件

• 配置压缩插件排除SCSS文件
  如果你确实需要保留原始SCSS文件到构建产物的assets目录下，可以修改CSS压缩插件配置，跳过SCSS文件的压缩逻辑：
  若使用@angular-builders/custom-webpack扩展构建配置，新增以下规则即可：

  const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
  module.exports = {
    optimization: {
      minimizer: [
        new CssMinimizerPlugin({
          exclude: /\.scss$/,
        }),
      ],
    },
  };
  

• 检查Sass版本兼容性
  Angular 12要求sass版本≥1.32.0，版本过低也可能触发编译异常，可执行以下命令升级到兼容版本：
  npm i sass@1.58.3 -D

内容的提问来源于stack exchange，提问作者Syed Shahbaz Ulla