Résoudre l'erreur PostCSS 8 lors de l'installation de Tailwind CSS dans Vue 3 (v3.2.10) (non-Vite, prend en charge PostCSS 8)

Question

<p>J'utilise Vue version 3.2.10 <strong>, je n'utilise pas Vite</strong> et j'essaie d'installer Tailwind CSS version 2.2.14 (dernière version). </p> <p><strong>Important : Vue prend en charge PostCSS 8 à partir de la version 3.0.6</strong> (voir le point 3 mis à jour dans la documentation GitHub, sous "fonctionnalités"). </p> <p>Après avoir suivi attentivement les instructions d'installation, j'obtiens toujours l'erreur suivante lors de l'exécution de <code>npm run serve</code> : </p> <pre class="brush:php;toolbar:false;">erreur dans ./src/assets/main.css Erreur de syntaxe : Erreur : le plugin PostCSS tailwindcss nécessite PostCSS 8. Guide de migration pour les utilisateurs finaux : https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users</pre> <p>Voici mon fichier package.json : </p> <pre class="brush:php;toolbar:false;">"scripts": { "serve": "vue-cli-service servir", "build": "build vue-cli-service" }, "dépendances": { "@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-routeur": "^4.0.0-0" }, "dépendances dev": { "@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" }</pré> <p>Comme mentionné ci-dessus, Vue 3.0.6 et versions ultérieures prennent définitivement en charge PostCSS 8. De plus, la description « <em>PostCSS 7 compatible build</em> » pour Tailwind CSS ne fonctionne pas.</p>

按照这些说明后，我收到以下错误：</p> <pre class="brush:php;toolbar:false;">npm ERR ! code ERESOLVE npm ERR ! ERESOLVE incapable de résoudre l'arborescence des dépendances npm ERR ! npm ERR ! Trouvé : postcss@7.0.36 npm ERR ! node_modules/postcss npm ERR ! dev postcss@"^7" du projet racine npm ERR ! postcss@"^7.0.32" de autoprefixer@9.8.6 npm ERR ! node_modules/autoprefixer npm ERR ! dev autoprefixer@"^9" du projet racine npm ERR ! préfixe automatique@"^9.8.6" de @vue/cli-service@4.5.13 npm ERR ! node_modules/@vue/cli-service npm ERR ! homologue @vue/cli-service@"^3.0.0 || ^4.0.0-0" de @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" à partir du projet racine npm ERR ! 3 de plus (@vue/cli-plugin-router, @vue/cli-plugin-vuex, le projet racine) npm ERR ! 1 de plus (vent arrière) npm ERR ! 42 de plus (@intervolga/optimize-cssnano-plugin, ...) npm ERR ! npm ERR ! Impossible de résoudre la dépendance : npm ERR ! homologue postcss@"^8.0.0" de postcss-cli@8.3.1 npm ERR ! node_modules/postcss-cli npm ERR ! dev postcss-cli@"^8.3.1" depuis le projet racine npm ERR ! npm ERR ! Résolvez le conflit de dépendances en amont ou réessayez npm ERR ! cette commande avec --force ou --legacy-peer-deps npm ERR ! pour accepter une résolution de dépendance incorrecte (et potentiellement cassée). npm ERR ! npm ERR ! Voir /Users/mgav/.npm/eresolve-report.txt pour un rapport complet. npm ERR ! Un journal complet de cette exécution peut être trouvé dans : npm ERR ! /Users/mgav/.npm/_logs/2021-09-08T21_09_08_052Z-debug.log</pre> <p>感谢您的帮助！</p>

Answer 1

Dans certains cas, le problème ne semble pas être directement lié à VueJS, mais à vue-cli.

La solution qui a fonctionné pour moi était :

1. Mettez à jour @vue/cli vers "^5.0.0-beta.3" (anciennement "~4.5.0") - (Lien sur npm)
2. Mettre à jour @vue/compiler vers la dernière version stable - (lien sur npm - actuellement 3.2.11)
3. Même si je n'utilisais pas la version postcss7-compat, je l'ai désinstallée via npm uninstall tailwindcss @tailwindcss/postcss7-compat selon les instructions de la publication.
4. Réinstallez les dernières versions de TailwindCSS, PostCSS et AutoPrefixer via npm install tailwindcss@latest postcss@latest autoprefixer@latest.

C'est tout !

Remarque : Ce n'est pas mon travail. J'ai été dirigé vers ce message sur le forum Vuejs par Lindsay Wardell (@lindsaykwardell), où la solution a été fournie par Thomas Castelly (qui n'a pas non plus de compte StackOverflow).