解決postcss、postcss-loader 和less-loader 導致的報錯問題
Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
Syntax Error: TypeError: this.getOptions is not a function
@[toc]
一、問題背景介紹
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 地址，查看了這些插件的歷史版本，如下：
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 8Syntax 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 。
