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];
  }

score 11 · Answer 1 · answered Jan 01 '20 at 07:08

11

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.

answered Jan 01 '20 at 07:08

Chema

147
2
9

3

This works great but is deprecated in favor of ignoreWarning: https://webpack.js.org/configuration/other-options/#ignorewarnings – MaxPRafferty Feb 18 '21 at 20:22

score 9 · Answer 2 · answered Aug 12 '16 at 09:20

9

Can you try adding

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

answered Aug 12 '16 at 09:20

Pavithra Kodmad

255
1
6

1

Hiding a warning is not a good idea, as it's probably a configuration problem, as explained in my answer. – MoOx Aug 12 '16 at 21:00
1

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 – Pavithra Kodmad Aug 17 '16 at 03:44
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. – kinger6621 Feb 24 '18 at 23:50
`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. – Martin Tournoij Dec 25 '22 at 23:56

score -9 · Answer 3 · answered Aug 12 '16 at 07:10

-9

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.

answered Aug 12 '16 at 07:10

MoOx

8,423
5
40
39

1

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 – Avi Zloof Aug 12 '16 at 09:12
1

This warning is a warning covered by unit tests https://github.com/postcss/postcss-custom-properties/blob/12ad2bf75c40338f629f8b3d47c921ba30a5f98a/test/index.js#L61-L72, 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. – MoOx Aug 12 '16 at 21:02
@MoOx it would be nice if you could reach to the angular team so they can fix this. – Ced Nov 19 '17 at 18:45

How to suppress warnings using webpack and post css

3 Answers3