webpack遇见的问题：options has an unknown property ‘plugins‘. These properties are valid

最新推荐文章于 2025-11-15 22:47:32 发布

原创最新推荐文章于 2025-11-15 22:47:32 发布 · 8.2k 阅读

1 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

1 篇文章

订阅专栏

这篇博客主要讨论了在Webpack配置中遇到的PostCSS Loader错误，问题在于options对象的结构不正确。错误信息提示`plugins`属性未知。解决方案是更新options对象，将`plugins`配置改为`postcssOptions`，并用一个箭头函数包裹`postcss-preset-env`的引入。修正后的代码展示了如何正确地配置`postcss-loader`以避免此类错误。

错误描述：

ERROR in ./src/css/index.less (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??postcss!./node_modules/less-loader/dist/cjs.js!./src/css/index.less)

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.- options has an unknown property 'plugins'. These properties are valid:

 module:{
        rules:[
            {
                test:/\.less$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',//将css文件整合在js中
                    { //css兼容 postcss-loader postcss-preset-env
                        loader:"postcss-loader",
                        options:{
                                ident:"postcss",
                                    plugins:[
                                    require("postcss-preset-env")()
                                ]
                        }
                    }
                    'less-loader'
                ]
            },
        ]
    },

改成：在 ident:"postcss",

plugins:()=>[

require("postcss-preset-env")()

]

外部加一层postcssOptions

options:{

postcssOptions:{

ident:"postcss",

plugins:()=>[

require("postcss-preset-env")()

]

}

修改过后的代码：

 module:{
        rules:[
            {
                test:/\.less$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',//将css文件整合在js中
                    {//css兼容 postcss-loader postcss-preset-env
                        loader:"postcss-loader",
                        options:{
                            postcssOptions:{
                                ident:"postcss",
                                    plugins:[
                                    require("postcss-preset-env")()
                                ]
                            }
                        }
                    },
                    'less-loader'

                ]
            },

        ]
    },