Webpack：如何解决ignoreWarnings无法屏蔽指定Sass文件编译告警的问题

你之前配置的规则仅匹配了项目内的_bootstrap.scss文件，但该文件只是作为入口引入了FontAwesome依赖，告警的实际产生源是node_modules下的FontAwesome官方scss文件，所以规则无法命中。

方案1：一键屏蔽所有第三方依赖的Sass告警（推荐） #

Dart Sass原生提供quietDeps参数，专门用于屏蔽所有来自node_modules目录下依赖文件的编译告警，无需手动匹配文件路径，适配大部分主流构建工具：

Vite 配置 #

在vite.config.js/ts中添加如下配置：

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        quietDeps: true
      }
    }
  }
})

Vue CLI 配置 #

在vue.config.js中添加如下配置：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        sassOptions: {
          quietDeps: true
        }
      }
    }
  }
}

Webpack + sass-loader 配置 #

在webpack配置的sass-loader规则中添加参数：

module: {
  rules: [
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            sassOptions: {
              quietDeps: true
            }
          }
        }
      ]
    }
  ]
}

方案2：仅屏蔽FontAwesome的特定告警 #

如果需要保留其他第三方依赖的告警，只屏蔽FontAwesome的除法弃用告警，修正ignoreWarnings配置如下：

config.ignoreWarnings = [
  {
    // 匹配所有FontAwesome依赖下的scss文件
    file: /node_modules[\\/]@fortawesome[\\/].*\.scss$/i,
    // 可选：匹配除法弃用告警的文本，避免误屏蔽其他同文件的有效告警
    message: /Using \/ for division is deprecated/
  }
]

两种方案都可以完全消除相关的FontAwesome Sass编译告警，不影响项目本身代码的告警提示。

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