如何使用webpack和postcss消除警告

Question

我怎样才能抑制Webpack加载PostCSS文件时生成的警告？

警告示例：

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

- Avi Zloof

Answer 1

你可以使用 stats.warningsFilter。尝试使用类似以下的内容：

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

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

- Chema

---

这个功能非常好用，但已被新的 ignoreWarning 功能所取代：https://webpack.js.org/configuration/other-options/#ignorewarnings - MaxPRafferty

Answer 2

你可以尝试添加以下内容

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

- Pavithra Kodmad

---

隐藏警告并不是一个好主意，因为这很可能是一个配置问题，正如我在答案中所解释的那样。 - MoOx

是的，我的第一个建议是解决导致警告的问题。但是如果已知存在问题并且您不希望警告混乱您的控制台，则上面提供了一种解决方案。 - Pavithra Kodmad

有没有办法通过任何方式抑制给定模块的警告？我正在使用一个会产生很多警告的模块，我宁愿让开发人员处理它们。 - kinger6621

ignoreWarnings: [/./] 将会在当前版本的 webpack (5) 中抑制所有警告。有时候当你正在迁移项目并且只想先修复错误而不想被数百个警告干扰时，这是非常有用的。 - Martin Tournoij

Answer 3

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

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

- MoOx

---

嗨，问题在于我有一个文件保存了所有的变量，而且我为每个组件都有不同的CSS页面，所以实际上这个警告是错误的。 - Avi Zloof

此警告是由单元测试 https://github.com/postcss/postcss-custom-properties/blob/12ad2bf75c40338f629f8b3d47c921ba30a5f98a/test/index.js#L61-L72 覆盖的警告，所以如果您收到此警告，则是因为您要求插件执行它无法执行的转换。如果您想转换 var() 的使用方式，则插件需要在相同的上下文中具有定义。如果您有一个包含所有变量的 js 文件，请使用此插件的 "variables" 选项。如果您在另一个 CSS 文件中有变量，请使用 postcss-import，这样 postcss-custom-properties 就可以访问正确（当前）范围内的变量。 - MoOx

@MoOx 如果您能联系 Angular 团队修复此问题，那将非常好。 - Ced