我正在使用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 错误!代码 ERESOLVE npm 错误! ERESOLVE 无法解析依赖关系树 npm 错误! npm 错误!发现:postcss@7.0.36 npm 错误!节点模块/postcss npm 错误! 根项目中的 dev postcss@"^7" npm 错误! postcss@"^7.0.32" 来自 autoprefixer@9.8.6 npm 错误! 节点模块/自动前缀器 npm 错误! 根项目中的 dev autoprefixer@"^9" npm 错误! autoprefixer@“^9.8.6”来自@vue/cli-service@4.5.13 npm 错误! node_modules/@vue/cli-service npm 错误! 来自 @vue/cli-plugin-babel@4.5.13 的对等 @vue/cli-service@"^3.0.0 || ^4.0.0-0" npm 错误! node_modules/@vue/cli-plugin-babel npm 错误! 根项目中的 dev @vue/cli-plugin-babel@"~4.5.0" npm 错误! 另外 3 个(@vue/cli-plugin-router、@vue/cli-plugin-vuex,根项目) npm 错误! 1 更多 (tailwindcss) npm 错误! 另外 42 个(@intervolga/optimize-cssnano-plugin,...) npm 错误! npm 错误!无法解决依赖关系: npm 错误!来自 postcss-cli@8.3.1 的对等 postcss@"^8.0.0" npm 错误!节点模块/postcss-cli npm 错误! 根项目中的 dev postcss-cli@"^8.3.1" npm 错误! npm 错误!修复上游依赖冲突,或重试 npm 错误!此命令带有 --force 或 --legacy-peer-deps npm 错误!接受不正确的(并且可能损坏的)依赖关系解析。 npm 错误! npm 错误!有关完整报告,请参阅 /Users/mgav/.npm/eresolve-report.txt。 npm 错误!此运行的完整日志可以在以下位置找到: npm 错误! /Users/mgav/.npm/_logs/2021-09-08T21_09_08_052Z-debug.log;
感谢您的帮助!
在某些情况下,问题似乎与VueJS直接无关,而与vue-cli有关。
对我有效的解决方案是:
npm uninstall tailwindcss @tailwindcss/postcss7-compat
卸载了它。npm install tailwindcss@latest postcss@latest autoprefixer@latest
重新安装最新版本的TailwindCSS,PostCSS和AutoPrefixer。就是这样!
注意:这不是我的工作。我是由Lindsay Wardell (@lindsaykwardell)指导到Vuejs论坛上的这篇帖子,其中的解决方案由Thomas Castelly(也没有StackOverflow账号)提供。