Selesaikan ralat PostCSS 8 apabila memasang Tailwind CSS dalam Vue 3 (v3.2.10) (bukan Vite, menyokong PostCSS 8)

Question

Saya menggunakan Vue versi 3.2.10 tidak menggunakan Vite dan cuba memasang Tailwind CSS versi 2.2.14 (versi terkini).

Penting: Vue menyokong PostCSS 8 bermula dengan versi 3.0.6 (lihat titik 3 yang dikemas kini dalam dokumentasi GitHub, di bawah "ciri").

Selepas mengikuti arahan pemasangan dengan teliti, saya terus mendapat ralat berikut semasa menjalankan npm run serve:

ralat dalam ./src/assets/main.css

Ralat Sintaks: Ralat: Pemalam PostCSS tailwindcss memerlukan PostCSS 8.
Panduan migrasi untuk pengguna akhir:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

Ini ialah fail package.json saya:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "kebergantungan": {
    "@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"
  }

Seperti yang dinyatakan di atas, Vue 3.0.6 dan ke atas pasti menyokong PostCSS 8. Selain itu, "Binaan serasi PostCSS 7" untuk Tailwind CSS tidak berfungsi.

按照这些说明后，我收到以下错误：

npm ERR! kod ERESOLVE
npm ERR! ERESOLVE tidak dapat menyelesaikan pepohon pergantungan
npm ERR! 
npm ERR! Ditemui: postcss@7.0.36
npm ERR! node_modules/postcss
npm ERR!   dev postcss@"^7" daripada projek root
npm ERR!   postcss@"^7.0.32" daripada autoprefixer@9.8.6
npm ERR!   node_modules/autoprefixer
npm ERR!     dev autoprefixer@"^9" daripada projek akar
npm ERR!     autoprefixer@"^9.8.6" daripada @vue/cli-service@4.5.13
npm ERR!     node_modules/@vue/cli-service
npm ERR!       rakan sebaya @vue/cli-service@"^3.0.0 || ^4.0.0-0" daripada @vue/cli-plugin-babel@4.5.13
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"~4.5.0" daripada projek root
npm ERR!       3 lagi (@vue/cli-plugin-router, @vue/cli-plugin-vuex, projek root)
npm ERR!     1 lagi (tailwindcss)
npm ERR!   42 lagi (@intervolga/optimize-cssnano-plugin, ...)
npm ERR! 
npm ERR! Tidak dapat menyelesaikan pergantungan:
npm ERR! rakan sebaya postcss@"^8.0.0" daripada postcss-cli@8.3.1
npm ERR! node_modules/postcss-cli
npm ERR!   dev postcss-cli@"^8.3.1" daripada projek root
npm ERR! 
npm ERR! Betulkan konflik pergantungan huluan, atau cuba semula
npm ERR! arahan ini dengan --force, atau --legacy-peer-deps
npm ERR! untuk menerima resolusi pergantungan yang salah (dan berpotensi rosak).
npm ERR! 
npm ERR! Lihat /Users/mgav/.npm/eresolve-report.txt untuk laporan penuh.

npm ERR! Log lengkap larian ini boleh didapati di:
npm ERR!     /Users/mgav/.npm/_logs/2021-09-08T21_09_08_052Z-debug.log

感谢您的帮助！

Answer 1

Dalam beberapa kes, masalah itu nampaknya tidak berkaitan secara langsung dengan VueJS tetapi kepada vue-cli.

Penyelesaian yang berkesan untuk saya ialah:

1. Kemas kini @vue/cli kepada "^5.0.0-beta.3" (sebelum ini "~4.5.0") - (Pautan pada npm)
2. Kemas kini @vue/compiler kepada versi stabil terkini - (pautan pada npm - pada masa ini 3.2.11)
3. Walaupun saya tidak menggunakan versi postcss7-compat, saya menyahpasangnya melalui npm uninstall tailwindcss @tailwindcss/postcss7-compat mengikut arahan siaran.
4. Pasang semula versi terkini TailwindCSS, PostCSS dan AutoPrefixer melalui npm install tailwindcss@latest postcss@latest autoprefixer@latest.

Itu sahaja!

Nota: Ini bukan kerja saya. Saya diarahkan ke siaran ini di forum Vuejs oleh Lindsay Wardell (@lindsaykwardell), di mana penyelesaiannya disediakan oleh Thomas Castelly (yang juga tidak mempunyai akaun StackOverflow).