用 transform 钩子拦截 CSS 需匹配 id（如 endsWith('.css') 且排除 node_modules），手动调用 postcss 处理，返回 { code, hmr: { invalidate: true } } 触发 HMR，避免误改第三方 CSS 或滥用 :global()。
如何用 transform 钩子拦截 CSS 内容
Vite 插件中修改已引入的 CSS，核心是 transform 钩子配合 id 匹配。它在 CSS 文件被解析为字符串后、注入页面前触发，此时你拿到的是原始文本，可直接正则替换或 AST 处理。
关键点：必须限定 id 以避免误改所有 CSS（比如第三方库或 reset.css）；且不能依赖 query 参数判断模块类型——.module.css 和普通 .css 在 transform 阶段都只是字符串。
- 匹配路径建议用
id.endsWith('.css') && !id.includes('node_modules')，再加业务路径白名单（如src/components/） - 不要用
if (id.includes('module'))判断 CSS Modules——Vite 不会在 id 中暴露模块化状态 - 若需区分模块化行为，应读取 Vite 配置中的
css.modules设置，但注意该配置只影响生成的 JS 映射对象，不影响 transform 时的原始内容
为什么 css.postcss 钩子不适用于运行时修改
css.postcss 钩子只在构建阶段（build）生效，开发服务器（dev）中 Vite 默认跳过 PostCSS 处理，直接走内部 CSS 转换流程。这意味着你在 dev 模式下写 css.postcss 插件，根本不会执行。
常见错误现象：插件里写了 css.postcss: () => ({ plugins: [...] })，改了 CSS 文件却没看到 PostCSS 插件的日志输出，控制台也无报错——不是代码问题，是钩子压根没被调用。
立即学习“前端免费学习笔记（深入）”；
- dev 模式下必须用
transform+ 手动调用postcss().process()（需自行安装postcss和插件） - build 模式下
css.postcss可用，但无法做“运行时条件修改”（比如根据环境变量注入不同变量） - 若目标是统一处理所有 CSS（含第三方），更稳妥的方式是用
transform+id.match(/\.css$/)+postcss(...).process(code)
修改后如何确保 HMR 正常触发
单纯在 transform 中改内容不会自动触发 HMR 更新——Vite 的 CSS HMR 是基于文件系统变更检测的，不是基于内容哈希。你改了内容，但文件时间戳没变，客户端就不会拉新样式。
所以拦截修改后，必须主动通知 Vite 当前模块需要热更新。方法是返回 { code, map, hmr: { invalidate: true } }，或更精确地调用 server.moduleGraph.invalidateModule(module)（需从插件上下文获取 server 实例）。
- 漏掉
hmr.invalidate或invalidateModule，会导致样式修改了，但页面不刷新，必须手动 F5 - 如果插件还涉及 JS 模块依赖该 CSS（比如
import styles from './Button.module.css'），仅 invalidating CSS 模块不够，还需调用moduleGraph.onFileChange触发 JS 重编译 - 避免在 transform 中无条件
invalidate——这会造成每次保存都全量刷新，破坏开发体验
容易被忽略的 CSS 特殊语法处理
CSS 中的 @import、@keyframes、:global() 等语法，在 transform 阶段仍是纯文本。直接正则替换可能破坏结构，比如把 @keyframes fade-in 里的 fade-in 错当成类名替换了。
真正安全的做法是用 postcss 解析 AST，而非字符串操作。但要注意：Vite 自带的 postcss 版本（v8+）与插件手动安装的版本可能存在 Container 类型不兼容，导致 root.walkAtRules 报错。
- 推荐显式安装
postcss@8并锁定版本，避免与 Vite 内置版本冲突 - 对
@import，若想改为内联，需同步 resolve 路径并递归 transform，不能只替换 URL 字符串 -
:global()是 CSS Modules 的特有语法，普通 CSS 文件里出现它会被忽略；若你在非 module 文件里用了它，Vite 不会报错，但浏览器也不识别——这种写法本身就不该存在
最常踩的坑不是不会写 transform，而是忘了 HMR 主动失效、误伤第三方 CSS、或在非 module 文件里强行处理 :global() 这类语义。这些地方一旦出错，现象都是“样式变了但页面没反应”，排查时容易绕远路。
