第一個就是提示“Cannot find module 'autoprefixer'”
這個錯誤是合情合理的,因為在配置里使用了postcss插件autoprefixer,但是在依賴里卻沒有指定它。
然后將最新版的autoprefixer和其它提示所需的module都給配置上,再次build時還是提示錯誤“Error: PostCSS plugin autoprefixer requires PostCSS 8.”。
但這個時候postcss已經是PostCSS 8了啊?
從報錯的位置看到,它是從@vue/cli-service下的postcss模塊報錯,而不是從項目下的postcss報錯。
至於為什么會調用@vue/cli-service下的postcss模塊,這里就不探究了。導致的后果就是即使項目下的postcss已經是PostCSS 8還是會報錯。
報錯的原因就是找到的autoprefixer插件的postcss屬性為true。
由於postcss用的是@vue/cli-service下的,接着就發現其實@vue/cli-service已經存在了autoprefixer、postcss、postcss-loader、supports-color等必須的模塊。
這個時候檢測出autoprefixer的postcss屬性為true,說明用的是項目下10.0.1版本的autoprefixer,而不是@vue/cli-service下
9.8.6版本的autoprefixer,因為只有10.0.1版本的autoprefixer才被設置了postcss屬性且為true。
這說明在存在兩份autoprefixer和postcss的情況下,@vue/cli-service構建時用的是自己目錄下的postcss,而插件autoprefixer用的項目目錄下的。
這種不同路徑下模塊的選擇是如何實現的呢?
首先@vue/cli-service通過自己目錄下的postcss-loader模塊,調用應用目錄下的postcss-load-config模塊來加載插件。
postcss-load-config模塊通過調用自己目錄下的plugins.js來加載插件。
插件路徑的選擇就是在這個腳本中決定的,它是使用import-cwd模塊來導入插件的,這也就決定了插件模塊必須在應用目錄下,而不能在項目的父級目錄或nodejs目錄下,同時即使插件模塊已經存在於@vue/cli-service目錄下也不可用。
至此已經調查清楚。