Invalid options object. PostCSS Loader has been initialized using an options object that does not...

原代码为:

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"]
        })
    ]
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容