如何使用 webpack 和 post 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

假设您的警告如下所示：

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);
...

要使用基于消息的正则表达式

ignoreWarnings

，您可以从消息中选择任何文本：

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

要将

ignoreWarnings

与返回

true

或

false

的函数一起使用，您可以使用多个条件：

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)")
      );
    },
  ],
  ...
}

Answer 4

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

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