使用 vue 项目构建期间出现 Tailwind 错误
Posted
技术标签:
【中文标题】使用 vue 项目构建期间出现 Tailwind 错误【英文标题】:Tailwind error during build with vue project 【发布时间】:2021-10-28 00:19:45 【问题描述】:我的 Vue2 Tailwind CSS 项目在开发中运行良好。但是对于生产我仍然有一个问题:
cross-env NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build
(node:19240) UnhandledPromiseRejectionWarning: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
我尝试使用许多 *** 帖子中提到的 PostCSS8 和 Compat 7 版本,但这绝对没有任何作用。
有什么方法可以让它在 Vue 2 下工作?
这是我的 package.json:
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts":
"serve": "vue-cli-service serve",
"build:local": "SET NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build",
"build": "cross-env NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build",
"lint": "vue-cli-service lint"
,
"dependencies":
"axios": "^0.21.1",
"bootstrap": "^5.0.1",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"tldts": "^5.7.38",
"vue": "^2.6.14",
"vue-cookies": "^1.7.4",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
,
"devDependencies":
"@tailwindcss/postcss7-compat": "^2.2.7",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-pwa": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"postcss": "^7.0.36",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.8",
"vue-template-compiler": "^2.6.11"
【问题讨论】:
尝试所有这 4 个“解决方案”不起作用:exerror.com/error-postcss-plugin-tailwindcss-requires-postcss-8 【参考方案1】:我也有同样的问题。 如果您在 2.1.4 安装 tailwind compat 版本,它将工作,但我需要稍后添加一些修复和功能。 为了让您尝试此修复,请更改您的 package.json
- "@tailwindcss/postcss7-compat": "^2.2.7"
+ "@tailwindcss/postcss7-compat": "2.1.4",
如果有人可以让它在 2.1.4 以上工作,请在此处回复。
【讨论】:
以上是关于使用 vue 项目构建期间出现 Tailwind 错误的主要内容,如果未能解决你的问题,请参考以下文章
将 Tailwind.css 添加到 Vue.js 项目后,某些类没有效果
如何使用 Tailwind 和 Vue.js 动态显示移动菜单?