Webpack：抑制来自特定文件的警告

Question

I'm trying to suppress some FontAwesome Sass compilation warnings that obviously cannot be fixed from my end like so:

config.ignoreWarnings = [
  {
    file: /_bootstrap\.scss$/i
  }
]

But the warnings are not ignored or suppressed. Maybe ignoreWarnings does not suppress compilation warnings? Regardless, how can warnings generated from compiling this Sass file be ignored?

Generated Warnings

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(20em, 16)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
12 │ $fa-fw-width:          (20em / 16);
   │                         ^^^^^^^^^
   ╵
    node_modules\@fortawesome\fontawesome-free\scss\_variables.scss 12:25  @import
    node_modules\@fortawesome\fontawesome-free\scss\fontawesome.scss 5:9   @import
    assets\styles\_bootstrap.scss 4:9                                      @import
    assets\styles\app.scss 1:9                                             root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(4em, 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
6 │   font-size: (4em / 3);
  │               ^^^^^^^
  ╵
    node_modules\@fortawesome\fontawesome-free\scss\_larger.scss 6:15     @import
    node_modules\@fortawesome\fontawesome-free\scss\fontawesome.scss 8:9  @import
    assets\styles\_bootstrap.scss 4:9                                     @import
    assets\styles\app.scss 1:9                                            root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(3em, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
7 │   line-height: (3em / 4);
  │                 ^^^^^^^
  ╵
    node_modules\@fortawesome\fontawesome-free\scss\_larger.scss 7:17     @import
    node_modules\@fortawesome\fontawesome-free\scss\fontawesome.scss 8:9  @import
    assets\styles\_bootstrap.scss 4:9                                     @import
    assets\styles\app.scss 1:9                                            root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($fa-li-width * 5, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
6 │   margin-left: $fa-li-width * 5/4;
  │                ^^^^^^^^^^^^^^^^^^
  ╵
    node_modules\@fortawesome\fontawesome-free\scss\_list.scss 6:16        @import
    node_modules\@fortawesome\fontawesome-free\scss\fontawesome.scss 10:9  @import
    assets\styles\_bootstrap.scss 4:9                                      @import
    assets\styles\app.scss 1:9                                             root stylesheet

 DONE  Compiled successfully in 7725ms

Answer 1

Try the below,

ignoreWarnings: [
      {
        file: /file_name/,
        message: /your warning message that need to be suppressed/,
      },
      (warning, compilation) => true
    ]

Ref: https://webpack.js.org/configuration/

Answer 2

In my case using file regex didn't work, I fixed it using module regex instead

Not working

ignoreWarnings: [
    {
        file: /path\/to\/file\/style.scss$/,
        message: /the warning/,
    },
],

Working

ignoreWarnings: [
    {
        module: /path\/to\/file\/style.scss$/,
        message: /the warning/,
    },
],