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)
P粉831310404
P粉831310404 2023-08-24 22:38:19
0
1
482

J'utilise Vue version 3.2.10 , je n'utilise pas Vite et j'essaie d'installer Tailwind CSS version 2.2.14 (dernière version).

Important : Vue prend en charge PostCSS 8 à partir de la version 3.0.6 (voir le point 3 mis à jour dans la documentation GitHub, sous "fonctionnalités").

Après avoir suivi attentivement les instructions d'installation, j'obtiens toujours l'erreur suivante lors de l'exécution de npm run serve :

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

Voici mon fichier package.json :

"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" } 

Comme mentionné ci-dessus, Vue 3.0.6 et versions ultérieures prennent définitivement en charge PostCSS 8. De plus, la description « PostCSS 7 compatible build » pour Tailwind CSS ne fonctionne pas.

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

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

感谢您的帮助!

P粉831310404
P粉831310404

répondre à tous (1)
P粉787806024

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 vianpm uninstall tailwindcss @tailwindcss/postcss7-compatselon les instructions de la publication.
  4. Réinstallez les dernières versions de TailwindCSS, PostCSS et AutoPrefixer vianpm 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).

    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!