解决npm run serve使用animate.css报'unprefixed' of undefined错误

错误根因 #

该报错由PostCSS版本不兼容触发：你使用的@vue/cli-service@4.5.x内置依赖PostCSS 7，但项目中安装的css-loader@6.x要求PostCSS 8作为运行依赖，两个版本的PostCSS API不兼容，在解析animate.css的样式规则时就会出现找不到unprefixed属性的报错。你后续安装的postcss-rtlcss默认适配PostCSS 8，进一步放大了版本冲突问题。

修复步骤 #

• 降级css-loader到适配PostCSS7的版本
  执行命令：

  npm install css-loader@4.3.0 --save
  

• 处理RTL插件版本冲突
  先卸载不兼容的RTL插件：

  npm uninstall postcss-rtlcss postcss-rtl --save-dev
  

  如果你确实需要RTL能力，再安装适配PostCSS7的版本：

  npm install postcss-rtl@1.7.2 --save-dev
  

• 清理残留依赖并重新安装

  rm -rf node_modules package-lock.json
  npm install
  

• 验证修复
  重新执行npm run serve或npm run build即可正常编译。

注意事项 #

不要在不清楚脚手架内置依赖版本的情况下随意升级css-loader、webpack这类核心构建工具，vue-cli 4.x系列默认适配的是webpack 4.x、postcss 7.x版本的生态，盲目升级高版本loader会触发兼容性问题。

内容的提问来源于stack exchange，提问作者Coder14