Angular 11集成Bootstrap^4.3.1出现SCSS编译警告如何修复或屏蔽

警告本质 #

该警告是Angular 11默认使用的Dart Sass（替代了已弃用的Node Sass）的语法检查提示，并非实际编译错误：

• Bootstrap 4.3.1的SCSS代码中，把未加引号的颜色类状态变量（如$state: gray这类内置色值）直接放入CSS选择器的插值语法#{$state}中
• 新版Dart Sass会识别到这类插值可能生成无效CSS，因此输出批量警告日志，不影响最终产物的CSS功能

根本修复方案（推荐） #

从根源修正语法问题，彻底消除警告：

• 升级兼容新Sass的Bootstrap 4.x版本
  Bootstrap从4.4.0版本开始已修复这类插值语法问题，且4.6.2为4.x分支最终稳定版，无5.x版本的破坏性变更，完全适配Angular 11构建链：
  1. 修改package.json中的Bootstrap依赖配置：

     "bootstrap": "^4.6.2"
     

  2. 执行npm install重装依赖，警告会自动消失
• 手动补丁（受限于版本无法升级时使用）
  若因业务兼容性要求必须停留在4.3.1，可通过patch-package工具固化对第三方依赖的语法修复：
  1. 修改node_modules/bootstrap/scss/mixins/_list-group.scss第4行，将原代码

     .list-group-item-#{$state} {
     

     调整为

     .list-group-item-#{"" + $state} {
     

  2. 同理修复同目录下_buttons.scss、_badges.scss等混合宏中存在的同类未加引号颜色插值语法
  3. 安装补丁工具：

     npm install patch-package --save-dev
     

  4. 执行命令生成Bootstrap补丁：

     npx patch-package bootstrap
     

  5. 在package.json的scripts字段新增安装后自动应用补丁的配置：

     "postinstall": "patch-package"
     

警告静音方案（临时应急） #

若无需修改语法，仅需屏蔽控制台的警告输出，可直接调整构建配置：

• 适配Angular CLI 11.2+版本
  修改angular.json中构建配置的stylePreprocessorOptions字段，新增Sass的静默依赖配置：

  "architect": {
    "build": {
      "options": {
        "stylePreprocessorOptions": {
          "sass": {
            "quietDeps": true
          }
        }
      }
    }
  }
  

  该配置会让Dart Sass完全屏蔽node_modules目录下所有第三方SCSS文件的编译警告，仅对项目源码内的SCSS文件输出提示
• 适配旧版Angular CLI 11.x
  若版本无内置quietDeps配置项，可在项目全局SCSS入口文件（即引入Bootstrap的application.scss）最顶部添加Sass日志抑制指令：

  @use "sass:logger" with (
    $warn: (
      "deprecation": false,
      "general": false
    )
  );
  // 保持原有引入Bootstrap的逻辑
  @use "bootstrap/scss/bootstrap";
  

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