解决postcss、postcss-loader 和less-loader 导致的报错问题

Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
Syntax Error: TypeError: this.getOptions is not a function

一、问题背景介绍

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-loader5.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 。