如何使用 webpack 抑制警告并发布 css

Question

如何抑制 webpack 加载 post css 文件时产生的警告？

警告示例：

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

我的 webpack 配置：

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

Answer 1

你可以尝试添加

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

Answer 2

您可以使用stats.warningsFilter。试试这样的：

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

您可以添加任何出现在警告中的内容，即使是使用正则表达式或函数。越具体越好。

Answer 3

您试图隐藏此警告是错误的。顺便说一句，这个警告更像是一个错误。 你应该修复它。使用没有引用或回退的 var() 函数是错误的，并且会为浏览器创建无效值。

来源：postcss-custom-properties 的作者。