解决postcss
、postcss-loader
和less-loader
导致的报错问题
Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
Syntax Error: TypeError: this.getOptions is not a function
文章目录
- 解决` postcss`、`postcss-loader` 和`less-loader` 导致的报错问题
- 一、问题背景介绍
- 二、报错问题分析:
- 三、报错问题解决
- 四、总结
一、问题背景介绍
1、在Vue的项目中使用了postcss-pxtorem这个包,同时在项目根目录中,配置了postcss.config.js
,如下图所示:
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'ios >= 8']
},
'postcss-pxtorem': {
rootvalue ({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75
},
propList: ['*']
}
}
}
package.js
中插件所安装的版本
2、在运行npm run serve
启动项目,报如下错误:
Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
二、报错问题分析:
1、根据报错问题提示和问题查询,使用postcss-pxtorem
这个包,也需要安装 postcss 和 postcss-loader,
在终端中 npm install postcss postcss-loader -D
2、安装完之后,package.js
中插件所安装的版本如下:
3、再次运行npm run serve
启动项目 ,报如下错误:Syntax Error: TypeError: this.getOptions is not a function
此问题之前解决过,是由于less-loader版本过高导致,但是发现package.js
中less-loader
的版本已经是5.0.0了,难道less-loader
5.0.0版本还是高吗,随即把 less-loader
的版本分别降低到了 4.0+和3.0+版本,再次运行npm run serve
启动项目发现报错还是一样,没有解决。
三、报错问题解决
1、根据以上测试和报错问题,问题能够定位到是由于某插件版本导致,但目前具体不清楚到底是由于哪些插件版本导致的。所以只能先继续测试了,想了一个办法,分别找到 less-loader
、postcss-loader
的 npm
地址,查看了这些插件的历史版本,如下:
- less-loader https://www.npmjs.com/package/less-loader
- postcss-loader https://www.npmjs.com/package/postcss-loader
2、分别对照less-loader
、postcss-loader
的版本,找到下载量较多,并且在大概相同时间发布的版本
我找的是
less-loader
版本是 7.0.1,postcss-loader
的版本是 4.0.4
3、然后根据以上确定的版本,重新安装这些版本 命令如下:npm install less-loader@7.0.1 postcss-loader@4.0.4 -D
这样会覆盖之前的版本。当然也可以选择最为暴力的方式,直接在package.js
中把less-loader
、postcss-loader
的版本修改成7.0.1和4.0.4版本,然后删除node_modules
目录,再通过npm install
重新安装依赖。4、再次运行npm run serve
启动项目,项目就能成功启动了。
5、最终package.js
中插件所安装的版本如下
四、总结
经过以上两个报错问题:
Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8
Syntax Error: TypeError: this.getOptions is not a function
1、缺少相应的插件(安装包) postcss
和 postcss-loader
,安装这两个插件即可;
2、less-loader
、postcss-loader
的版本要相互匹配,版本相差不能太大,建议安装的版本分别为less-loader
7.0.1, postcss-loader
4.0.4 。