在Vue 3 (v3.2.10)中安装PostCSS 8错误(支持PostCSS 8)
我使用的是Vue 3.2.10版 ，没有Vite，并试图安装顺风CSS版本2.2.14 (最近)。
重要: Vue版本3.0.6开始支持PostCSS 8 (参见更新的GitHub文档中的第3点，在“特性”下)
在仔细地遵循安装说明之后，然后运行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。另外，用于"https://tailwindcss.com/docs/installation#post-css-7-compatibility-build“的尾风CSS指令不起作用。
在遵循了这些指令之后，我得到了以下错误：
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谢谢你的帮忙!
回答 3
Stack Overflow用户
发布于 2021-09-09 18:17:58
问题似乎(无论如何，在某些情况下)不是直接链接到VueJS，而是vue-cli。
对我有效的解决办法是：
- 将@vue/cli更新为"^5.0.0-beta.3“(在”~4.5.0“上)- (与国家预防机制的链接)
- 更新@vue/编译器到最新的稳定- (链接到那个- 3.2.11现在-关于国家预防机制)
- 尽管我没有使用postcss7 7-compat版本，但我按照帖子的指示通过
npm uninstall tailwindcss @tailwindcss/postcss7-compat卸载。 - 通过TailwindCSS、PostCSS和AutoPrefixer的最新版本通过
npm install tailwindcss@latest postcss@latest autoprefixer@latest重新安装
就这样!
注:这是，不是我的作品__。我是由https://twitter.com/lindsaykwardell (@lindsaykwardell)指示到https://forum.vuejs.org/t/vue-3-postcss-8/112492的，由https://forum.vuejs.org/u/shenron (也没有StackOverflow句柄)提供解决方案。
Stack Overflow用户
发布于 2021-09-10 09:17:45
vue-cli的最新稳定包(v4.5.13现在)没有问题。
看起来，您的问题更多地是关于管理依赖项(您应该阅读有关此主题的https://nodejs.dev/learn/update-all-the-nodejs-dependencies-to-their-latest-version )，因为使用TailwindCSS与最新的Vue3稳定版本一起使用只需要安装依赖项的最新版本，只有很少的命令行，而且不需要框即可工作。
例如，您将在下面的说明中找到创建最小Vue3 3/Tailwind项目的说明，该项目的工作方式如下：
$ vue create vue3-tailwindcss
$ cd vue3-tailwindcss
$ npm install -D @vue/compiler-sfc tailwindcss@latest postcss@latest autoprefixer@latest
$ npm run serve节点和Vue版本：
$ node --version
v16.5.0
$ vue --version
@vue/cli 4.5.13关于您的问题，您可以使用以下方法让它处理最新的马厩包：
在package.json中，进行这些更改：
"@vue/cli-service": "~4.5.0"=>"@vue/cli-service": "^4.5.13""vue": "^3.0.0"=>"vue": "^3.2.11""@vue/compiler-sfc": "^3.0.0"=>"@vue/compiler-sfc": "^3.2.11"
然后删除文件package-lock.json并运行npm install。
Stack Overflow用户
发布于 2021-12-23 13:56:24
简单的解决方案，没有Vite。
可以使用较新版本的Vue CLI启动新项目。只要重新安装它，就像：
npm uninstall -g @vue/cli
npm install -g @vue/cli@next并创建一个新的Vue 3项目。它将支持PostCSS 8，没有任何问题。
然后跟着使用PostCSS的顺风3安装指南。不要忘记将*.vue文件包含在tailwind.config.js中。
你已经准备好走了。
以 我造的这个回购 为指南。
https://stackoverflow.com/questions/69109763
复制相似问题
腾讯云开发者
