編碼的世界 / 優質文選 / 生涯

解決postcss、postcss-loader 和less-loader 導致的報錯問題

2022年7月17日
-

解決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中插件所安裝的版本如下：

此問題之前解決過，是由於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 啟動項目，項目就能成功啟動了。

四、總結

經過以上兩個報錯問題:

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