原代码为：
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')({
// 设置浏览器兼容的版本
browsers: ["last 2 version", ">1%", "iOS 7"]
})
]
}
}
]
}
]
},
};
以上代码报错
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
原因是postcss-loader这个版本不支持在webpack.config.js文件中这么写。
解决办法:
删除webpack.config.js中的，options配置。在项目根目录下新建一个postcss.config.js文件，配置如下：
module.exports = {
plugins: [
require('autoprefixer')({
browsers: ["last 2 version", ">1%", "iOS 7"]
})
]
}
此时，运行你会发现，出现另一个报错：
Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.
Using browsers option can cause errors. Browserslist config can
be used for Babel, Autoprefixer, postcss-normalize and other tools.
If you really need to use option, rename it to overrideBrowserslist.
原因是之前的版本已经不支持，browsers属性，应该使用overrideBrowserslist替换，更改如下：
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ["last 2 version", ">1%", "iOS 7"]
})
]
}
