Lightning CSS 可大幅提升 Vite 的 CSS 编译与 HMR 速度，但需手动安装并显式配置 transformer，且对语法错误零容忍，CSS Modules、Tailwind、Sass/Less 等需额外适配或前置处理。
Lightning CSS 能让 Vite 的 CSS 编译和 HMR 快一个数量级，但不是装完包配个字段就能用——它默认“零容错”，一个 @apply 或漏掉的分号就会 kill dev server。
必须手动安装并显式启用 transformer
Vite 4.4+ 支持 Lightning CSS，但它不会自动安装依赖，也不会默认接管 CSS 处理流程。
- 运行
npm add -D lightningcss（注意是-D，不是-S） - 在
vite.config.js中必须设置css.transformer: 'lightningcss'，仅配置build.cssMinify: 'lightningcss'只影响生产压缩，不加速开发时的 HMR - 如果你用的是 TypeScript，确保
vite.config.ts中类型能识别css.lightningcss配置项（Vite 4.4+ 已内置，无需额外插件）
CSS Modules 会失效？那是没配对 css.lightningcss.cssModules
Lightning CSS 对模块化有独立路径，css.modules: true + transformer: 'lightningcss' 是常见错误组合，会导致类名不加哈希、作用域丢失。
- 正确写法：删掉
css.modules，改用css.lightningcss.cssModules: true -
.module.css文件才走模块逻辑；普通.css文件仍按全局处理，不解析composes或:global() -
@import './vars.css'在模块文件中会失败——vars.css必须重命名为vars.module.css，否则导入被忽略或样式泄漏
报错就退出？得靠 errorRecovery 或前置处理兜底
Lightning CSS 遇到语法错误（如 ParseError: Expected semicolon、Unknown at rule @apply）直接抛致命错误，Vite 不恢复、server 崩溃。
立即学习“前端免费学习笔记（深入）”；
-
css.lightningcss.errorRecovery: true可缓解部分问题，但不是所有版本都支持，需查你装的lightningcss版本文档 - Tailwind 的
@tailwind、@layer等规则 Lightning CSS 原生不认——必须用postcss前置处理，或改用postcss-lightningcss插件桥接 - Sass/Less 文件不能直喂 Lightning CSS：必须先经
sass或less编译成纯 CSS，再交给它处理
嵌套语法 &:hover 和 @mixin 全都不支持
Lightning CSS 不是预处理器，它只实现标准 CSS（含部分嵌套草案），但默认不开启嵌套支持，也不兼容 Sass 语义。
-
&:hover、@extend、@mixin、@include全部报错或静默忽略 - 想保留嵌套？两个选择：
postcss-nesting（配合 PostCSS pipeline）或彻底接受扁平结构 +composes组合 - 浏览器目标（
css.lightningcss.targets）会影响是否降级嵌套语法——但即便开了，也只支持nesting标准草案，不支持 Sass 风格缩进
最易被忽略的一点：Lightning CSS 的 errorRecovery 不等于 PostCSS 的宽容模式，它只是防止进程退出，错误样式仍不会生效；真要稳，开发阶段建议关 transformer，构建阶段再开。
