webpack使用postcss-larder报错:ValidationError: Invalid options object. PostCSS Loader has...的解决方案

最新推荐文章于 2024-03-05 12:04:17 发布
最新推荐文章于 2024-03-05 12:04:17 发布
阅读量2.9k 收藏 2
点赞数 1
分类专栏： 前端 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46240646/article/details/116275120
版权
在webpack打包过程中遇到'ValidationError: Invalid options object. PostCSS Loader has...'的错误，原因是postcss-loader更新导致API不匹配。解决方案是更新webpack.config.js的配置，无需降级postcss-loader。同时，若使用less，less的loader也需要相应修改。此问题的出现通常由于教程使用的是旧版postcss-loader的配置。作者分享了自己的解决办法，并提倡讨论，反对降级解决。
摘要由CSDN通过智能技术生成

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:
object { postcssOptions?, execute?, sourceMap?, implementation? }

webpack打包时遇到这个错误是因为postcss-loader目前已经更新到5.2版本了,有的同学可能是看的教程学的webpack,而教程里用的是老版本的postcss-loader.注意新老版本的API是不一样的

解决方案:把webpack.config.js的配置改成如下即可(无需降级):

{
   
    test: /\.css$/,
    use:[
        MiniCssExtractPlugin.loader,//此句话也可用Style.loader代替
最低0.47元/天 解锁文章
一只Huskie
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
webpack使用copy-webpack-plugin插件遇到错误：Invalid options object. Copy Plugin has been initialized using an
鸭绒的博客
07-26 9268
使用copy-webpack-plugin插件遇到的报错： Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema. -options[0] misses the property ‘patterns’. Should be: [non-empty string | object { from, to?, context?, glo
PostCSS Loader has been initialized using an options object that does not match the API schema.（亲测）
CSDN_001VIP的博客
09-17 1671
在react中使用ant design landing时，遇到报错。
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object
YanG_2859390447的博客
04-19 5387
vue脚手架4.5.15配置px2rem报错： ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object 是因为vue脚手架的版本太高的降一下版本，重新下载项目配置就OK了 npm install -g @vue/cli@4.5.15 px2rem配置网址： https://blog.csdn.net/YanG_2859390447/article/d
webpack之postcss-loader报Invalid options object. PostCSS Loader has been initialized using an options
hong
04-20 3363
出现问题 在学习webpack配置CSS兼容性处理，postcss插件报错 配置代码如下 报错的原因 ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. 无效的选择对象。PostCSS加载器已使用与API模式不匹配的options对象进行初始化。 解决方法 下载一个叫autoprefi
webpack：Invalid options object. PostCSS Loader has been initialized using an options object that doe
fankse的博客
11-20 4173
在做webpack配置css兼容的时候出现了postcss-loader插件不兼容问题 配置代码如下： 出现的错误 原因是postcss-loader这个版本不支持在webpack。config。js文件中这么写 解决办法： 在项目根目录下新建一个postcss.config.js文件 配置如下： webpack。config.js文件配置如下 这样子就解决了版本不兼容的问题 ...
解决：ValidationError: Invalid options object. PostCSS Loader has been.....
热门推荐
cake_eat的博客
10-29 1万+
报错信息： ERROR in ./src/css/a.css Module build failed (from …/node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from …/node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader
postcss-plugin-px2rem报错Syntax Error: PostCSS Loader has been initialized using an options object...
最新发布
qq_42433342的博客
03-05 805
postcss-plugin-px2rem报错Syntax Error: 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: objec
Invalid options object. PostCSS Loader has been initialized using an options object that does not
qq_43294027的博客
11-03 5686
PostCSS Loader has been initialized using an options object that does not match the API schema
使用低版本的vue-loader遇到的坑之ValidationError: Invalid options object. CSS Loader has been initialized using
qq_41687400的博客
08-07 1万+
使用低版本的vue-loader遇到的坑 最近在学习使用webpack打包vue项目，所以一开始下载了vue-loader和vue-template-compiler，但是由于现在15版本的vue-loader需要引入一个插件才能使用，我为了省事，在下载的时候指定了vue-loader的版本是14.2.2，一开始打包什么的都没问题，但是后来加入了style-loader和postcss-loader以及其他的杂七杂八的loader和plugin之后，我使用webpack打包就老是报错，（使用webpack-
compression-webpack-plugin GZip插件打包报错 ValidationError: Compression Plugin Invalid Options
Jane_96的博客
08-19 2456
安装插件： yarn add compression-webpack-plugin 配置webpack.js ： const CompressionPlugin = require("compression-webpack-plugin"); return ( plugins: [ new BundleAnalyzerPlugin(), isEnvProductio...
webpack-dev-server启动报错Invalid options object
m0_54849806的博客
03-06 737
使用yarn start启动项目时报错 package.json相关依赖如下 "webpack": "^4.43.0", "webpack-cli": "^4.9.1", "webpack-dev-server": "^4.5.0" 报错信息如下： [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the
解决：ValidationError: Invalid options object. PostCSS Loader ......
Mr.小灰狼_随笔
03-29 7321
PostCSS Loader 已使用与 API 架构不匹配的选项对象进行初始化。vue --version 这时候看到 vue-cli 已经是 @4 版本的了。卸载掉当前 5.x 的版本（ mac 版本 的前面需要加上 sudo ）直接下载 @4 版本（ mac 版本 的 前面需要加上 sudo ）- 选项具有未知属性“plugins”。最后再按照创建项目的步骤重新走一遍就 OK 了。使用 vue/cli @'./xxx/xx' 中出现错误。1、首先打开终端执行。
Invalid options object. PostCSS Loader has been initialized using an options object that does not ma
weixin_43859511的博客
08-19 5394
在做webpack配置css兼容的时候出现了postcss-loader插件不兼容问题： 原因：postcss-loader这个版本不支持在webpack.config.js文件 解决办法： 1.在项目根目录下新建一个postcss.config.js文件 2.postcss.config.js 中写入一下 module.exports={ plugins:[ // require('postcss-preset-env') ] } 3.we...
配置react移动端单位自适应之后 报错ValidationError: Invalid options object. PostCSS Loader has been initialized usi
qq_46008434的博客
11-22 6038
Uncaught Error: 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 proper..
postcss-loader打包css报错SyntaxError记录
九日的博客
10-26 1013
问题表现： 先上我的代码： postcss.config： package.json 当我打包时会报错 原因：暂时不明，可能是postcss-loader或webpack的最新版本带来的问题。 解决： 删除postcss-loader的option 表现：
webpack2中postcss-loader报错noconfigfound
weixin_30679823的博客
12-10 111
在项目根目录下创建一个postcss.config.js文件，配置如下： module.exports = { plugins: [ require('autoprefixer')({ browsers: ['last 5 versions'] }) ] } 直接运行 npm run dev 就可以了 ...
vue打包--TypeError: this.getOptions is not a function（关于postcss-loader）
qq_35353972的博客
04-02 1391
问题的分析：这个实际上就是 postcss-loader 的版本过高，不兼容 getOptions 函数方法，所以需要对 postcss-loader 进行降级处理。运行以上命令下载降级版本的 postcss-loader，这个问题就可以解决了。
Invalid options object. PostCSS Loader has been initialized using an options
skyskni的博客
04-12 2024
Invalid options object. PostCSS Loader has been initialized using an options 今天在学习webpack的时候遇到以上错误。在使用postcss-loader对css做兼容性处理的时候，配置出现了一些问题，网上少有文档，emmmm… 注意：在写文章时我的webpack版本：5.31.0 webpack-cli版本：4.6.0 解决方法如下： 旧版配置 rules: [ { tes
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema
05-19
1. 确保你使用的 PostCSS Loader 版本与其他相关依赖项兼容，可以升级或降级 PostCSS Loader 版本尝试解决问题； 2. 检查你的 PostCSS Loader 配置选项是否符合官方 API schema，可以参考 PostCSS Loader 文档进行...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值