postcss未运行是根本原因：先在postcss.config.js顶部加require('xxx')验证是否被加载，若不报错说明文件位置错误或被vite.config.ts中css.postcss覆盖；确保其位于项目根目录且导出格式匹配（cjs/esm），插件需显式声明并版本兼容。
你的 Vite 项目里写了 :is(.a, .b) 却没转成兼容写法，@apply 在 Vue SFC 中原样保留不展开，var(--color) 构建后只剩变量没有兜底值——这些都不是插件“坏了”，而是 PostCSS 根本没运行，或运行了但没加载到你写的插件。
确认 postcss.config.js 是否被 Vite 实际读取
第一步：在 postcss.config.js 文件最顶部加一行 require('this-plugin-does-not-exist-at-all')，保存后重启 vite dev。
第二步：观察终端输出。如果没报 Cannot find module 'this-plugin-does-not-exist-at-all' 错误，说明这个文件压根没被 Vite 加载——【文件位置错误或被 vite.config.ts 覆盖】。
第三步：检查该文件是否位于项目根目录（与 vite.config.ts、package.json 同级），且文件名拼写完全正确（注意大小写和后缀）。
第四步：打开 vite.config.ts，搜索 css.postcss。如果存在该配置项，Vite 就会忽略 postcss.config.js——此时必须删掉 css.postcss 字段，或将其内容迁移到 postcss.config.js 中。
验证插件是否真正启用
方法一：用 autoprefixer 快速验证
确保已执行 npm install -D autoprefixer；在 postcss.config.js 的 plugins 对象中明确写出 'autoprefixer': {}；在任意 CSS 文件中写入 display: grid; 并设置 browserslist 包含 "Chrome >= 80"（该版本不需前缀），再写一个 display: flex; 并设 "Chrome >= 30"（需前缀）。构建后检查 dist 输出中是否出现 -webkit-box 等前缀。
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
方法二：故意触发插件报错
在 postcss.config.js 的 plugins 中加入 'postcss-bad-plugin': { boom: true }，然后启动开发服务器。若没报错，说明插件数组根本没被遍历——大概率是导出格式不匹配，比如用了 export default 但项目未声明 "type": "module"。
修复常见导出与格式问题
如果你的项目 package.json 中没有 "type": "module"，就必须用 CommonJS 格式导出配置：
module.exports = { plugins: { autoprefixer: {}, 'postcss-preset-env': { stage: 2 } } };
如果已声明 "type": "module"，则可用 ES Module 写法，但必须确保所有插件都支持 ESM 加载（如 tailwindcss v3.4+ 支持，旧版可能失败）。
遇到 [plugin:vite:css] Failed to load PostCSS config 报错？直接将文件重命名为 postcss.config.cjs——Vite 对 .cjs 后缀有更强的 CommonJS 解析保障，无需改任何代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
