启用 lightningcss 可显著提升 css 编译与 hmr 速度，但需手动安装依赖、显式配置 transformer 和 css.lightningcss 选项，注意 css modules 兼容性、错误中断机制、sourcemap 行为及浏览器目标兼容性。
直接启用 lightningcss 可以显著提升 CSS 编译和 HMR 速度，但必须绕开它的“零容错”陷阱，否则一个拼写错误就会让开发服务器崩溃。
启用 lightningcss transformer 时必须安装依赖并显式配置
Vite 4.4+ 支持原生 lightningcss，但它不是默认开启的，也不会自动安装依赖：
- 运行
npm add -D lightningcss（注意是-D，不是-S） - 在
vite.config.js中设置css.transformer: 'lightningcss'，不能只改build.cssMinify - 若同时用
css.modules，必须改用css.lightningcss.cssModules，否则模块化失效
错误示例：css.modules: true + transformer: 'lightningcss' → 模块作用域丢失，类名不加哈希。
lightningcss 报错就中断：必须配 fallback 或禁用 strict 模式
Lightning CSS 默认遇到任何语法错误（比如漏写 ;、错用 @apply、无效的嵌套）就抛出致命错误，Vite 不会恢复，开发服务器直接退出。
- 目前没有官方
fallback: 'postcss'配置项，Vite 未提供降级机制 - 临时缓解：在
css.lightningcss中加errorRecovery: true（仅部分版本支持，需查你用的lightningcss版本文档） - 更稳妥做法：开发阶段先关掉
transformer，或用插件如vite-plugin-lightningcss封装一层错误捕获逻辑
典型报错信息：ParseError: Expected semicolon 或 Unknown at rule @apply —— 这类错误在 PostCSS 下可能被忽略或警告，但在 Lightning CSS 下就是硬终止。
搭配 CSS Modules 时，.module.css 和 .css 文件行为完全不同
Lightning CSS 对模块文件有特殊处理路径，且不兼容 Less/Sass 的嵌套语法：
-
.module.css文件走css.lightningcss.cssModules流程，支持composes、:global()等，但不支持@import引入非模块 CSS -
.css文件走普通lightningcss转换，不加作用域，也不解析composes - 如果你用了
@import './vars.css'在模块文件里，vars.css 必须也是.module.css，否则导入失败或样式泄漏 - 嵌套写法（
&:hover）、@extend、@mixin全部不支持 —— Lightning CSS 不是预处理器，它只处理标准 CSS（含嵌套草案语法，但需显式开启且兼容性有限）
想保留嵌套？要么切到 postcss-nesting 插件（配合 PostCSS），要么接受扁平结构 + composes 组合。
构建时启用 cssMinify: 'lightningcss' 但要注意 sourcemap 兼容性
build.cssMinify: 'lightningcss' 能压缩得更小、更快，但 sourcemap 行为与 esbuild 默认不同：
- Lightning CSS 默认不生成 sourcemap，需手动设
css.lightningcss.sourceMap: true - 生成的 sourcemap 是 CSS-to-CSS 映射，无法回溯到原始 Less/Sass 文件 —— 如果你仍混用预处理器，sourcemap 会断链
- 压缩后某些 calc 表达式会被折叠（如
calc(100% - 2px)→calc(100% - 2px)可能变calc(100% - 2px)，看似没变，实则内部已归一化），调试时注意值是否被优化掉
最易被忽略的一点：Lightning CSS 的浏览器目标（targets）默认是现代浏览器，若项目需兼容 IE 或旧安卓 WebView，必须显式配置 css.lightningcss.targets，否则前缀可能缺失，且不会警告。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
