How to suppress warnings using webpack and post css

Question

How do I suppress warnings generated by webpack loading post css files?

Warning example:

WARNING in ./~/css-loader!./~/postcss-loader!./src/components/Navigator/Navigator.css
postcss-custom-properties: C:\StackData\bd\src\components\Navigator\Navigator.css:33:9: variable '--active' is undefined and
 used without a fallback

My webpack config:

 module: {
    loaders: [
   ...
      {test: /\.css/, loader: 'style-loader!css-loader!postcss-loader'},
   ...
    ]
  },
  postcss: function () {
    return [precss, autoprefixer];
  }

Dogy

Answer 1

Can you try adding

module.exports = {
  entry: ...,
  stats: {warnings:false}
  ...
}

Kolva

Hiding a warning is not a good idea, as it's probably a configuration problem, as explained in my answer. – Refutation

Yes, my first advice would be to fix the problem that is causing the warning. But in case there are known issues and you dont want the warning cluttering up your console, above is a solution – Kolva

Is there a way to suppress warnings from a given module by any chance? I'm using a module that is giving a lot of warnings and I rather let the developer deal with them. – Verbiage

ignoreWarnings: [/./] will suppress all warnings in current versions of webpack (5). It's useful sometimes if you're migrating and just want to fix errors first without hundreds of warnings cluttering things. – Defoliant

Answer 2

You can use the stats.warningsFilter. Try with something like this:

module.exports = {
    ...
    stats: {
        warningsFilter: [
            './~/css-loader!./~/postcss-loader!./src/components/Navigator/Navigator.css'
        ]
    }
    ...
}

You can add anything that appears in the warning, even with a regex or a function. More specific is better.

Macaulay

This works great but is deprecated in favor of ignoreWarning: webpack.js.org/configuration/other-options/#ignorewarnings – Vocalic

Answer 3

Let's say your warning looked like this:

Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation Warning on line 53, column 13 of file:///C:/Users/Jarad/Documents/PyCharm/project/app/node_modules/bootstrap/scss/vendor/_rfs.scss:53:13:
Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(100%)
To emit a CSS abs() now: abs(#{100%})
More info: https://sass-lang.com/d/abs-percent

53 |   $dividend: abs($dividend);
...

To use ignoreWarnings using regex based on the message, you could choose any text from the message:

module.exports = {
  ...
  ignoreWarnings: [
    {
      message: /\$dividend: abs\(\$dividend\)/,
    },
  ],
  ...
}

To use ignoreWarnings with a function that returns true or false, you could use multiple conditions:

module.exports = {
  ...
  ignoreWarnings: [
    (warning) => {
      // Ignoring Bootstrap SCSS deprecation warning for percentage units in abs() function
      const msg = warning.message;
      return (
        msg.includes("Deprecation Warning") && msg.includes("_rfs.scss") && msg.includes("$dividend: abs($dividend)")
      );
    },
  ],
  ...
}

Kulda

Answer 4

You are making a mistake by trying to hide this warning. This warning is more an error btw. You should just fix it. Using a var() function that have no reference or fallback is just wrong and will create invalid value for browsers.

Source: author of postcss-custom-properties.

Refutation

Hi,The point is that I have a file that holds all my vars and I have a spdifferent css page for ever component so actually this warning is wrong – Dogy

This warning is a warning covered by unit tests github.com/postcss/postcss-custom-properties/blob/…, so if you get it, it's because you asked the plugin to do a transformation it can't do. If you want to transform a var() usage, the plugin needs to have the definition in the same context. If you have a js files with all your vars, use the "variables" options of this plugin. If you have variable in another CSS file, use postcss-import so postcss-custom-properties can have access to the var in the correct (current) scope. – Refutation

@Refutation it would be nice if you could reach to the angular team so they can fix this. – Gertrudgertruda