使用 animate.css 包解析 npm 运行服务上的"Cannot read property 'unprefixed' of undefined"

Question

我正在开发一个应用程序，使用Vue, Quasar和animate.css包在我的网站中的CSS动画。一切都很顺利，直到最近我有一个问题与npm run build命令，这导致错误的标题。在一些调查，我试图安装postcss-rtlcss包，这导致这个错误发生在npm run serve以及。请注意，我对Vue和node.js生态系统相对较新，所以如果我做了什么完全错误的事情，请告诉我。

运行npm run serve时出错

ERROR  Failed to compile with 1 error                                                                                                                                          10:28:49 PM
error  in ./node_modules/animate.css/animate.css
Syntax Error: TypeError: Cannot read property 'unprefixed' of undefined

@ ./node_modules/animate.css/animate.css 4:14-163 15:3-20:5 16:22-171
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://10.0.0.251:8080&sockPath=/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js

除此之外，这里是我的package.json.

{
"name": "socialapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@quasar/extras": "^1.0.0",
"animate.css": "^4.1.1",
"core-js": "^3.6.5",
"css-loader": "^6.2.0",
"quasar": "^2.0.0",
"vue": "^3.1.4",
"vue-body-class": "^3.0.2",
"vue-router": "^4.0.0-0",
"vue-style-loader": "^4.1.3",
"webpack": "^4.45.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "^4.5.13",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"postcss-rtl": "^1.2.3",
"sass": "1.32.12",
"sass-loader": "^10.1.0",
"vue-cli-plugin-quasar": "~4.0.1"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

如果您还需要我做什么，请在评论中告诉我，我会尽我所能提供。谢谢你的帮助。

Answer 1

如果使用postcss版本8，然后确保您也有最新版本的postcss-preset-env，因为您不希望由于版本小于8的安全问题而降级postcss

"postcss-preset-env": "^7.2.3"

Answer 2

以下内容为我解决了这个问题。

"resolutions": {
"autoprefixer": "^10.4.12",
"postcss": "^8.2.12",
}

您可以使用yarn why [package]来确定当前是否直接或间接安装了这些内容，以及使用的是哪个版本。

Answer 3

我通过将我的PostCSS版本降级到package.json中的^7.0.36来修复这个问题。虽然这可能会在依赖树中导致问题，但当我尝试使用--force参数安装时，它工作得很好。所有命令现在都可以正常工作了。