autoprefixer遇到的幾個問題


第一個就是提示“Cannot find module 'autoprefixer'”

1602482696(1)

這個錯誤是合情合理的,因為在配置里使用了postcss插件autoprefixer,但是在依賴里卻沒有指定它。

然后將最新版的autoprefixer和其它提示所需的module都給配置上,再次build時還是提示錯誤“Error: PostCSS plugin autoprefixer requires PostCSS 8.”。

但這個時候postcss已經是PostCSS 8了啊?

image

從報錯的位置看到,它是從@vue/cli-service下的postcss模塊報錯,而不是從項目下的postcss報錯。

至於為什么會調用@vue/cli-service下的postcss模塊,這里就不探究了。導致的后果就是即使項目下的postcss已經是PostCSS 8還是會報錯。

報錯的原因就是找到的autoprefixer插件的postcss屬性為true。

image

由於postcss用的是@vue/cli-service下的,接着就發現其實@vue/cli-service已經存在了autoprefixer、postcss、postcss-loader、supports-color等必須的模塊。

image

這個時候檢測出autoprefixer的postcss屬性為true,說明用的是項目下10.0.1版本的autoprefixer,而不是@vue/cli-service下

9.8.6版本的autoprefixer,因為只有10.0.1版本的autoprefixer才被設置了postcss屬性且為true。

image

這說明在存在兩份autoprefixer和postcss的情況下,@vue/cli-service構建時用的是自己目錄下的postcss,而插件autoprefixer用的項目目錄下的。

這種不同路徑下模塊的選擇是如何實現的呢?

首先@vue/cli-service通過自己目錄下的postcss-loader模塊,調用應用目錄下的postcss-load-config模塊來加載插件。

image

postcss-load-config模塊通過調用自己目錄下的plugins.js來加載插件。

image

插件路徑的選擇就是在這個腳本中決定的,它是使用import-cwd模塊來導入插件的,這也就決定了插件模塊必須在應用目錄下,而不能在項目的父級目錄或nodejs目錄下,同時即使插件模塊已經存在於@vue/cli-service目錄下也不可用。

image

至此已經調查清楚。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM