构建Angular应用时如何禁用SCSS编译警告

你遇到的是dart-sass（替换node-sass后的默认SASS编译工具）针对未加引号的颜色名在插值中使用的警告，无需修改业务代码的禁用方法如下：

• 方案1：全局配置禁用（适配Angular CLI项目）
  修改项目根目录的angular.json文件，找到对应项目的构建配置节点，添加SASS预处理参数：

  {
    "projects": {
      "你的项目名称": {
        "architect": {
          "build": {
            "options": {
              "stylePreprocessorOptions": {
                "sassOptions": {
                  "silenceDeprecations": ["color-interpolation"],
                  "quiet": true
                }
              }
            }
          }
        }
      }
    }
  }
  

  配置完成后重新启动构建即可生效，silenceDeprecations会单独屏蔽颜色插值相关的警告，quiet参数会屏蔽所有SASS非致命警告，可根据需求选择配置。

• 方案2：单文件屏蔽警告
  如果只需要屏蔽本次报错的单个文件，直接在报错的src/assets/scss/_colors.scss文件第一行添加规则即可：

  @disable-warnings "color-interpolation";
  

  如果使用的SASS版本较低不支持上述规则，可以直接修改package.json中的构建命令，添加静默参数：

  "scripts": {
    "build": "ng build --quiet"
  }
  

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