解决Vue 3(v3.2.10)中安装Tailwind CSS时的PostCSS 8错误(非Vite,支持PostCSS 8)
P粉831310404
P粉831310404 2023-08-24 22:38:19
[Vue.js讨论组]

我正在使用Vue版本3.2.10 没有使用Vite,并尝试安装Tailwind CSS版本2.2.14(最新版本)。

重要提示:Vue版本3.0.6开始支持PostCSS 8(请参阅GitHub文档中的更新的第3点,位于“features”下)。

在仔细遵循安装说明后,运行npm run serve时,我一直收到以下错误:

error  in ./src/assets/main.css

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

这是我的package.json文件:

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

如上所述,Vue 3.0.6及以上版本肯定支持PostCSS 8。此外,Tailwind CSS的“PostCSS 7兼容构建”说明不起作用。

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

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: postcss@7.0.36
npm ERR! node_modules/postcss
npm ERR!   dev postcss@"^7" from the root project
npm ERR!   postcss@"^7.0.32" from autoprefixer@9.8.6
npm ERR!   node_modules/autoprefixer
npm ERR!     dev autoprefixer@"^9" from the root project
npm ERR!     autoprefixer@"^9.8.6" from @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" from @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" from the root project
npm ERR!       3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project)
npm ERR!     1 more (tailwindcss)
npm ERR!   42 more (@intervolga/optimize-cssnano-plugin, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer postcss@"^8.0.0" from postcss-cli@8.3.1
npm ERR! node_modules/postcss-cli
npm ERR!   dev postcss-cli@"^8.3.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/mgav/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mgav/.npm/_logs/2021-09-08T21_09_08_052Z-debug.log

感谢您的帮助!

P粉831310404
P粉831310404

全部回复(1)
P粉787806024

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号