解决： ValidationError: Invalid options object. PostCSS Loader ......-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决： ValidationError: Invalid options object. PostCSS Loader ......。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题背景：

使用 vue/cli @5.x 脚手架 工具搭建一个初始化 项目架子，在 vue.config.js 里面配置 移动端 的适配性插件（ postcss-pxtorem ）的代码时，运行启动项目时报错如下图：

Compiled with problems:

ERROR in './xxx/xx'

Module build failed (from './xxx/xx'):

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?, implemntation? }

编译时出现问题：
'./xxx/xx' 中出现错误
模块生成失败（来自“./xxx/xx”）：
ValidationError: 选项对象无效。PostCSS Loader 已使用与 API 架构不匹配的选项对象进行初始化。
- 选项具有未知属性 “plugins”。这些特性有效：

object { postssOptions？，execute？，sourceMap？，implementation？}

其实后来复盘的时候才后知后觉，上面报错信息已给提示： postssOptions

最后面的解决办法就是使用的它。

下图是 @4 版本的配置写法：

解决： ValidationError: Invalid options object. PostCSS Loader ......,前端,Vue,vue.js,javascript

如上写法配置，使用 @5 脚手架搭建的架子启动会报错如下

解决： ValidationError: Invalid options object. PostCSS Loader ......,前端,Vue,vue.js,javascript

各种百度解决：

解决： ValidationError: Invalid options object. PostCSS Loader ......,前端,Vue,vue.js,javascript

1、首先打开终端执行 npm uninstall @vue/cli -g 卸载掉当前 5.x 的版本（ mac 版本的前面需要加上 sudo ）

2、接着执行 npm install -g @vue/cli@4 直接下载 @4 版本（ mac 版本的前面需要加上 sudo ）
vue --version 这时候看到 vue-cli 已经是 @4 版本的了

最后再按照创建项目的步骤重新走一遍就 OK 了

【个人还是喜欢用新的，所以出台了新的解决方案请向下看】

时隔多日，看见🈶️大佬评论说是

可以不降版本的，用 postcssOptions 套住 plugins 就行了

好的，上代码：

css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-pxtorem')({
              rootValue: 16, // （Number | Function）表示根元素字体大小或根据input参数返回根元素字体大小。
              unitPrecision: 5, //  （Number）允许REM单位增加的十进制数字。
              propList: ['font', 'font-size', 'line-height', 'letter-spacing'], // （Array）可以从px更改为rem的属性。
              // 值必须完全匹配。
              // 使用通配符*启用所有属性。例：['*']
              // *在单词的开头或结尾使用。（['*position*']将匹配background-position-y）
              // 使用!不匹配的属性。例：['*', '!letter-spacing']
              // 将“ not”前缀与其他前缀组合。例：['*', '!font*']
 
              replace: true, // Boolean）替换包含rems的规则。
              mediaQuery: false, // （Boolean）允许在媒体查询中转换px。
              minPixelValue: 0, // Number）设置要替换的最小像素值。
              exclude: /node_modules/i // （String, Regexp, Function）要忽略并保留为px的文件路径。
            })
          ]
        }
      }
    }
  },

最终：初始化版本的 vue.config.js 代码为：

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: true,

  // postcss.config.js文件内容在vue.config.js内进行的配置
  css: {
    loaderOptions: {
      postcss: {
        // 可以不降版本，用 postcssOptions 套住 plugins 就行了 :{}
        postcssOptions: {
          plugins: [
            require('postcss-pxtorem')({
              // 基准值 以 iPhone6 为准, 设计稿的尺寸一般为 750px , 2 倍图
              // 1rem = 37.5px
              rootValue: 37.5,
              // 所有的样式属性中只要有尺寸单位都转换, style样式中的尺寸不会转换
              // 建议如果你用了 postcss-pxtorem 插件后, 最好就不要用style来写样式
              propList: ['*'],
              // selectorBlackList: ["van"],
            }),
          ],
        },
      },
    },
  },
});

感谢大佬的点评与支持哟（^_^）文章来源地址https://www.toymoban.com/news/detail-664924.html

到了这里，关于解决： ValidationError: Invalid options object. PostCSS Loader ......的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！