在 npm 运行 build 上出错（PostCSS 插件 postcss-purgecss 需要 PostCSS 8）vuejs3 和 tailwind

Question

我正在使用 vuejs3 和 tailwindcss 构建应用程序
我在开始项目之前测试了一些配置然后我得到了这个错误
npm run build 抛出：

ERROR  Failed to compile with 1 error                                2:48:15 PM

 error  in ./src/styles/index.css

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


 @ ./src/main.js 9:0-28
 @ multi ./src/main.js

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-vue-env@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the test-vue-env@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

这是我在 package.json 中的 devDependencies：

{
    "devDependencies": {
        "@fullhuman/postcss-purgecss": "^4.0.0",
        "@fullhuman/vue-cli-plugin-purgecss": "~4.0.2",
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-plugin-vuex": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.0.0",
        "@vue/eslint-config-prettier": "^6.0.0",
        "autoprefixer": "^10.2.5",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-prettier": "^3.1.3",
        "eslint-plugin-vue": "^7.0.0-0",
        "node-sass": "^5.0.0",
        "postcss": "^8.2.8",
        "prettier": "^1.19.1",
        "sass-loader": "^10.1.1",
        "tailwindcss": "^2.0.3"
    }
}

感谢您的宝贵时间！

Answer 1

根据 the official docs 你应该这样做：

npm uninstall tailwindcss postcss autoprefixer

然后

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

注意：为避免出现任何问题，您可以删除 package-lock.json 然后运行上述命令。

Answer 2

这是因为 tailwind 目前不支持 postcss 版本 8（我说的是 tailwind compat）。您可以在 tailwind 的 official link 上找到更多相关信息。基本上它说，其他库不支持 postcss 8，因此，tailwind 使用 postcss7-compat，直到更多人开始使用 postcss 8。

Answer 3

OP 没有在依赖项中列出反应。这些文档链接涉及 create-react-app，使您运行 postcss@^7 和 tailwindcss 具有 postcss-7-compat 版本。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 将在 Vue 3 中正常构建。

我建议你删除两个 @fullman 包，杀死你的 package.lock（假设使用 npm vs yarn）和 node_modules 文件夹和运行 npm install 再一次。 postcss 和 tailwindcss 包将引入正确的 postcss-purgecss 包。

Post 你的 tailwind 配置和构建器配置（webpack、rollup、gulp 等）如果你仍然有问题。

在 npm 运行 build 上出错（PostCSS 插件 postcss-purgecss 需要 PostCSS 8）vuejs3 和 tailwind

Getting error on npm run build (PostCSS plugin postcss-purgecss requires PostCSS 8) vuejs3 and tailwind

node.js

npm

vue.js

postcss

tailwind-css