在npm运行构建时出错(PostCSS插件postcss-purgecss需要PostCSS 8) vuejs3和顺风

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

OP不会在依赖项中列出react。这些文档链接涉及使您可以在postcss-7-compat版本中运行postcss@^7和tailwindcss的create-react-app。

使用Vue 3，npm install -D tailwindcss@latest postcss@latest autoprefixer@latest将构建得很好。

我建议您删除两个@fullman包，杀死您的package.lock (假设使用npm与yarn)和node_modules文件夹，然后再次运行npm install。postcss和tailwindcss包将引入适当的postcss-purgecss包。

如果仍然有问题，请发布您的顺风配置和构建器配置(webpack、汇总、吞咽等)。

Answer 3

这是因为到目前为止，顺风还不支持postcss版本8(我说的是顺风compat)。你可以在这个来自顺风的official link上找到更多关于这方面的信息。基本上它说，postcss 8不被其他库支持，因此，顺风使用postcss7-compat，直到更多的人开始使用postcss 8。