Webpack错误：配置具有未知属性“ postcss” [英] Webpack error: configuration has an unknown property 'postcss'

问题描述

升级到最新版本的webpack后，我看到此错误：

After upgrading to the latest version of webpack, I'm seeing this error:


WebpackOptionsValidationError：无效的配置对象。已使用与API模式不匹配的配置对象初始化Webpack。
-配置具有未知属性 postcss。这些属性是有效的：
object {amd？，bail？，cache？，context？，dependencies？，devServer？，devtool？，entry，externals？，loader？，module？，name？，node ?、输出？，插件，配置文件，recordsInputPath，recordsOutputPath，recordsPath，resolve，resolveLoader，stats，target，watch，watchOptions？ }
对于错别字：请更正它们。
对于加载程序选项：webpack 2不再允许配置中的自定义属性。
加载程序应进行更新，以允许通过module.rules中的加载程序选项传递选项。


这是我的webpack配置，显示了postcss模块：

Here's my webpack config showing the postcss module:


模块：{
加载程序：[
// JavaScript / ES6
{
测试：/\.js$/，
排除：/ node_modules /，
加载程序： babel-loader
}，
{
测试：/\.jsx?$/，
include ：path.resolve（__ dirname，'../src/components'），
排除：/ node_modules /，
loader：'babel-loader'
}，
// Sass
{
测试：/\.scss $ /，
包括：path.resolve（__ dirname，'../src/sass')，
排除：/ node_modules /，
loader：'style！css！postcss！sass'
}，
// CSS
{
test：/\.css$/，
loader：'style！css！postcss'
}，
// JSON
{
test：/\.json $ /，
排除： / node_modules /，
loader： json-loader'
}，
//图片
//≤8k图片的内联base64 URL，其余
{
test：/\.(png|jpg|jpeg|gif|svg） $ /，
加载程序： url，
包括：[
path.resolve（__ dirname，'../public'），
path.resolve（__ dirname，'。 ./src/sass'）
]，
排除：/ node_modules /，
查询：{
限制：8192，
名称：'images / [name] 。[ext]？[hash]'
}
}，
//字体
{
test：/\。(woff|woff2|ttf|eot ）（\v = \d + \.\d + \.\d +）？$ /，
loader：'url'，
include：path.resolve（__ dirname，' ../src/sass')，
排除：/ node_modules /，
查询：{
限制：8192，
名称：'fonts / [name]。[ext] ？[hash]'
}
}
]
}，
postcss：function（）{
return [
autoprefixer（{
个浏览器：[最后2个版本]
}）
];
}


推荐答案

解决方法是确保autoprefixer是包含在文件顶部，然后将 postcss 移至 plugins 部分：

The fix is to make sure that autoprefixer is included at the top of the file, and move postcss to the plugins section:

const autoprefixer = require('autoprefixer');

plugins: [
  // Shared code
  new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor.bundle.js',
    minChunks: Infinity
  }),
  new webpack.LoaderOptionsPlugin({
    options: {
      context: __dirname,
      postcss: [
        autoprefixer
      ]
    }
  })
]

这篇关于Webpack错误：配置具有未知属性“ postcss”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！