Beheben Sie den PostCSS 8-Fehler bei der Installation von Tailwind CSS in Vue 3 (v3.2.10) (nicht Vite, unterstützt PostCSS 8)

Question

Ich verwende Vue Version 3.2.10 nicht Vite und versuche, Tailwind CSS Version 2.2.14 (neueste Version) zu installieren.

Wichtig: Vue unterstützt PostCSS 8 ab Version 3.0.6 (siehe aktualisierter Punkt 3 in der GitHub-Dokumentation unter „Funktionen“).

Nachdem ich die Installationsanweisungen sorgfältig befolgt habe, erhalte ich beim Ausführen von npm run ser immer wieder die folgende Fehlermeldung:

Fehler in ./src/assets/main.css

Syntaxfehler: Fehler: Das PostCSS-Plugin tailwindcss erfordert PostCSS 8.
Migrationsleitfaden für Endbenutzer:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

Dies ist meine package.json-Datei:

"scripts": {
    „serve“: „vue-cli-service dienen“,
    „build“: „vue-cli-service build“
  },
  "Abhängigkeiten": {
    „@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“
  }

Wie oben erwähnt unterstützen Vue 3.0.6 und höher definitiv PostCSS 8. Darüber hinaus funktioniert die Beschreibung „PostCSS 7-kompatibler Build“ für Tailwind CSS nicht.

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

npm ERR! Code ERESOLVE
npm ERR! ERESOLVE konnte den Abhängigkeitsbaum nicht auflösen
npm ERR! 
npm ERR! Gefunden: postcss@7.0.36
npm ERR! node_modules/postcss
npm ERR!   dev postcss@"^7" aus dem Root-Projekt
npm ERR!   postcss@"^7.0.32" von autoprefixer@9.8.6
npm ERR!   node_modules/autoprefixer
npm ERR!     dev autoprefixer@"^9" aus dem Root-Projekt
npm ERR!     autoprefixer@"^9.8.6" von @vue/cli-service@4.5.13
npm ERR!     node_modules/@vue/cli-service
npm ERR!       Peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" von @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" aus dem Root-Projekt
npm ERR!       3 weitere (@vue/cli-plugin-router, @vue/cli-plugin-vuex, das Root-Projekt)
npm ERR!     1 mehr (Rückenwindcss)
npm ERR!   42 weitere (@intervolga/optimize-cssnano-plugin, ...)
npm ERR! 
npm ERR! Abhängigkeit konnte nicht aufgelöst werden:
npm ERR! Peer postcss@"^8.0.0" von postcss-cli@8.3.1
npm ERR! node_modules/postcss-cli
npm ERR!   dev postcss-cli@"^8.3.1" aus dem Root-Projekt
npm ERR! 
npm ERR! Beheben Sie den Upstream-Abhängigkeitskonflikt oder versuchen Sie es erneut
npm ERR! Führen Sie diesen Befehl mit --force oder --legacy-peer-deps aus
npm ERR! eine falsche (und möglicherweise fehlerhafte) Abhängigkeitsauflösung zu akzeptieren.
npm ERR! 
npm ERR! Einen vollständigen Bericht finden Sie unter /Users/mgav/.npm/eresolve-report.txt.

npm ERR! Ein vollständiges Protokoll dieses Laufs finden Sie in:
npm ERR!     /Users/mgav/.npm/_logs/2021-09-08T21_09_08_052Z-debug.log

感谢您的帮助！

Answer 1

在某些情况下，问题似乎与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账号）提供。