Vue2项目安装postcss@8.4.21后编译报错：Cannot read properties of undefined (reading 'config')

问题原因 #

你使用的@vue/cli-service@3.11.0属于Vue CLI 3.x版本，该版本内置的postcss-loader仅兼容PostCSS 7及以下版本。安装最新版PostCSS 8.x后，由于API不兼容，导致编译时出现TypeError: Cannot read properties of undefined (reading 'config')错误。另外，vue-loader是@vue/cli-service的依赖包，因此不会直接出现在你的package.json中。

解决方案 #

方案1：回退PostCSS到兼容版本（推荐） #

卸载当前的PostCSS 8.x，安装兼容PostCSS 7.x的最新版本：

npm uninstall postcss
npm install postcss@^7.0.39 --save-dev

方案2：升级Vue CLI到支持PostCSS 8的版本 #

Vue CLI 4.5及以上版本开始支持PostCSS 8，你可以升级@vue/cli-service及相关插件：

1. 卸载旧版CLI服务及插件：

npm uninstall @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint

2. 安装对应4.x版本：

npm install @vue/cli-service@^4.5.19 @vue/cli-plugin-babel@^4.5.19 @vue/cli-plugin-eslint@^4.5.19 --save-dev

注意：升级后可能需要检查其他依赖的兼容性，比如sass-loader、node-sass等是否与新版本CLI匹配。

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