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感谢您的帮助!
Dans certains cas, le problème ne semble pas être directement lié à VueJS, mais à vue-cli.
La solution qui a fonctionné pour moi était :
npm uninstall tailwindcss @tailwindcss/postcss7-compat
selon les instructions de la publication.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).