解決Vue 3(v3.2.10)中安裝Tailwind CSS時的PostCSS 8錯誤(非Vite,支援PostCSS 8)
P粉831310404
P粉831310404 2023-08-24 22:38:19
0
1
644
<p>我正在使用Vue版本3.2.10 <strong>沒有使用Vite</strong>,並嘗試安裝Tailwind CSS版本2.2.14(最新版本)。 </p> <p><strong>重要提示:Vue版本3.0.6開始支援PostCSS 8</strong>(請參閱GitHub文件中的更新的第3點,位於「features」下)。 </p> <p>在仔細遵循安裝說明後,執行<code>npm run serve</code>時,我一直收到以下錯誤:</p> <pre class="brush:php;toolbar:false;">error in ./src/assets/main.css Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users</pre> <p>這是我的package.json檔案:</p> <pre class="brush:php;toolbar:false;">"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-regular-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/vue-fontawesome": "^3.0.0-4", "@headlessui/vue": "^1.4.1", "core-js": "^3.6.5", "date-fns": "^2.23.0", "firebase": "^8.9.0", "vue": "^3.0.0", "vue-router": "^4.0.0-0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "autoprefixer": "^10.3.4", "postcss": "^8.3.6", "postcss-cli": "^8.3.1", "tailwindcss": "^2.2.14" }</pre> <p>如上所述,Vue 3.0.6以上版本肯定支援PostCSS 8。此外,Tailwind CSS的「<em>PostCSS 7相容建置</em>」說明不起作用。</p> <p>依照這些說明後,我收到以下錯誤:</p>
np​​m 錯誤!代碼 ERESOLVE
npm 錯誤! ERESOLVE 無法解析依賴關係樹
npm 錯誤!
npm 錯誤!發現:postcss@7.0.36
npm 錯誤!節點模組/postcss
npm 錯誤!根項目中的 dev postcss@"^7"
npm 錯誤! postcss@"^7.0.32" 來自 autoprefixer@9.8.6
npm 錯誤!節點模組/自動前綴器
npm 錯誤!根項目中的 dev autoprefixer@"^9"
npm 錯誤! autoprefixer@“^9.8.6”來自@vue/cli-service@4.5.13
npm 錯誤! node_modules/@vue/cli-service
npm 錯誤!來自 @vue/cli-plugin-babel@4.5.13 的對等 @vue/cli-service@"^3.0.0 || ^4.0.0-0"
npm 錯誤! node_modules/@vue/cli-plugin-babel
npm 錯誤!根項目中的 dev @vue/cli-plugin-babel@"~4.5.0"
npm 錯誤!另外 3 個(@vue/cli-plugin-router、@vue/cli-plugin-vuex,根項目)
npm 錯誤! 1 更多 (tailwindcss)
npm 錯誤!另外 42 個(@intervolga/optimize-cssnano-plugin,...)
npm 錯誤!
npm 錯誤!無法解決依賴關係:
npm 錯誤!來自 postcss-cli@8.3.1 的對等 postcss@"^8.0.0"
npm 錯誤!節點模組/postcss-cli
npm 錯誤!根項目中的 dev postcss-cli@"^8.3.1"
npm 錯誤!
npm 錯誤!修復上游依賴衝突,或重試
npm 錯誤!此命令與 --force 或 --legacy-peer-deps
npm 錯誤!接受不正確的(並且可能損壞的)依賴關係解析。
npm 錯誤!
npm 錯誤!有關完整報告,請參閱 /Users/mgav/.npm/eresolve-report.txt。

npm 錯誤!此運行的完整日誌可以在以下位置找到:
npm 錯誤! /Users/mgav/.npm/_logs/2021-09-08T21_09_08_052Z-debug.log
; <p>謝謝您的幫忙!</p>
P粉831310404
P粉831310404

全部回覆(1)
P粉787806024

在某些情況下,問題似乎與VueJS直接無關,而是與vue-cli有關。

對我有效的解決方案是:

  1. 將@vue/cli更新到「^5.0.0-beta.3」(之前是「~4.5.0」)-(npm上的連結
  2. 將@vue/compiler更新到最新的穩定版本-(npm上的連結-目前是3.2.11
  3. 即使我沒有使用postcss7-compat版本,我也按照帖子的說明通過npm uninstall tailwindcss @tailwindcss/postcss7-compat卸載了它。
  4. 透過npm install tailwindcss@latest postcss@latest autoprefixer@latest重新安裝最新版本的TailwindCSS,PostCSS和AutoPrefixer。

就是這樣!

注意:這不是我的工作。我是由Lindsay Wardell (@lindsaykwardell)指導到Vuejs論壇上的這篇文章,其中的解決方案由Thomas Castelly(也沒有StackOverflow帳號)提供。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板