Lightning CSS 的 targets 必须为对象格式(如 {chrome: 90, safari: 15.4}),不支持 browserslist 字符串(如 ">= 0.5%"),否则前缀缺失或降级失效且无报错;Vite 中需配置在 css.lightningcss.targets,Rsbuild 中须显式设 tools.lightningcssLoader.targets,且键名仅支持 chrome、safari 等标准名,版本值必须为数字。

targets配置项必须用对象格式,不能用browserslist字符串
Lightning CSS 的 targets 不接受 ">= 0.5%" 这类 browserslist 字符串,只认明确的浏览器版本对象。传错格式会导致前缀缺失或降级失效,但不会报错——样式在旧浏览器里悄悄出问题。
常见错误现象:Chrome 87 里 gap 没加 -webkit- 前缀,Flexbox 行为异常;iOS Safari 14.5 里 color-mix() 被保留未降级,直接被忽略。
-
targets必须是键值对形式,例如{ chrome: 90, firefox: 88, safari: 15.4, edge: 91 } - 版本号支持小数(如
safari: 15.4),但不支持通配符或范围表达式 - 未声明的浏览器默认按最新标准处理,不会自动 fallback
- 若需兼容 IE,Lightning CSS 官方不支持——它从设计上放弃 IE,强行配置也不会生成
-ms-前缀
在 Vite 中配置 targets 要走 css.lightningcss
Vite 4.4+ 启用 Lightning CSS 后,css.modules 和 css.postcss 配置对它无效。必须把 targets 放进 css.lightningcss 对象里,否则会被忽略。
错误写法:css: { postcss: { browsers: ['chrome >= 90'] } } —— 这个配置只影响 PostCSS,Lightning CSS 完全无视。
立即学习“前端免费学习笔记(深入)”;
- 正确路径是
css.lightningcss.targets,例如:export default defineConfig({<br> css: {<br> transformer: 'lightningcss',<br> lightningcss: {<br> targets: { chrome: 95, safari: 16.2, firefox: 102 }<br> }<br> }<br>}) - 如果同时用了 CSS Modules,也要改用
css.lightningcss.cssModules,而不是css.modules - Vite 的
build.target(如'es2015')不影响 CSS 降级逻辑,二者独立
Rsbuild 中 targets 写法更严格,且默认不继承 browserslist
Rsbuild 默认启用 Lightning CSS,但它**不会读取项目根目录的 .browserslistrc 或 package.json#browserslist**。即使你写了,它也视而不见。
这意味着:本地开发和 CI 构建行为可能不一致——开发时靠 IDE 插件提示,构建时却按 Rsbuild 默认目标(通常是较新版本)处理,导致上线后部分样式失效。
- 必须显式配置
tools.lightningcssLoader.targets,例如:export default {<br> tools: {<br> lightningcssLoader: {<br> targets: { chrome: 89, firefox: 87, safari: 14.1 }<br> }<br> }<br>} - 值必须是数字,不能是字符串
"89",否则解析失败且静默忽略 - 不支持
ios_saf、and_chr等 browserslist 别名,只认safari、chrome等标准键名
浏览器版本填太低会触发降级警告,但不一定报错
Lightning CSS 对过低版本有隐式限制:Chrome
典型表现:构建日志里出现 Warning: Unsupported browser version for chrome: 59,但构建成功,线上用户看到的是未降级的 grid-template-areas,老浏览器直接忽略整条规则。
- 建议最低目标设为 Chrome 63 / Firefox 60 / Safari 10.1 —— 这是 Lightning CSS 明确支持的起点
- 低于此版本的兼容需求,应通过 polyfill 或渐进增强策略解决,而非指望 Lightning CSS
- 没有全局开关能强制启用“尽力降级”,它只做规范内支持的转换
{ safari: 14.1 },它就按 Safari 14.1 的能力边界生成代码,不会多留一条兼容 Safari 13 的备用规则。兼容性不是靠“兜底”,而是靠精确匹配目标能力清单。


















