美文网首页杂谈
Invalid options object. PostCSS

Invalid options object. PostCSS

作者: LXEP | 来源:发表于2021-04-29 16:21 被阅读0次

    原代码为:

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

    相关文章

      网友评论

        本文标题:Invalid options object. PostCSS

        本文链接:https://www.haomeiwen.com/subject/rxewrltx.html