Webpack: Suppressing warnings from a specific file

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

user_8370370 · Answer

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/

user_7721477 · Answer

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/,
    },
],

Webpack: Suppressing warnings from a specific file

2 Answers