根本原因是Less编译输出的CSS含Safari拒绝解析的非法结构，如@media非顶层、伪类顺序错误、空选择器等，导致其静默忽略整条规则。
Less编译产物在 Safari 中显示异常，根本不是“Safari 不支持 Less”，而是它最终输出的 CSS 本身含 Safari 拒绝解析的结构
Less 只负责把 .less 编译成标准 CSS，而 Safari（尤其是 iOS 15.4 之前、macOS Monterey 之前）对 CSS 的语法容错极低：遇到非法嵌套、空选择器、未闭合块、或@media 出现在非顶层位置，会直接跳过整条规则，不报错、不警告，只安静失效。
常见翻车点：
-
@media块被 Less 错误嵌套在选择器内部（如.btn { @media (max-width: 768px) { color: red; } }），编译后变成无效 CSS：.btn @media (max-width: 768px) { color: red; }→ Safari 忽略整块 - 伪类顺序写错（如
&:active:hover），编译后为a:active:hover→ 违反 LVHA 规则，浏览器静默丢弃 - 变量未定义却参与计算（如
margin: @gap * 2;，但@gap未声明），Less 输出margin: * 2;或空值 → Safari 解析中断，后续样式全丢 -
@import路径 404 或文件为空（0 字节），Less 编译中止，后续所有规则不进入输出流 → 你看到的是“部分样式缺失”，实际是“后面整段没生成”
为什么 DevTools 看着正常，真机却白屏或错位？
因为 Chrome DevTools 的模拟器和 Safari iOS / iPadOS 原生渲染引擎对 CSS 的解析严格度完全不同。DevTools 可能宽容处理 .card @media 这类非法结构，而真机 Safari 直接跳过——它只认标准 CSS at-rule 必须位于顶层。
验证方法很直接：
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 打开 Safari 开发者工具 → Elements 面板 → 找到目标元素 → 右键「在资源中查找」→ 定位对应 CSS 文件
- 搜索
@media，确认每处后面是否紧跟着{，且其内部有合法选择器（如.header { ... }），而不是空块或孤立属性 - 搜索
:hover、:focus等伪类，看它们是否都绑定在具体元素名之后（如button:hover），而非以:hover单独开头 - 检查 Computed 面板里关键样式（如
display、grid-template-areas）是否被划掉（invalid）或显示为none
Less 编译为空或局部丢失，常因构建链路静默吞错
Webpack 的 less-loader 默认 throwOnImportError: false，@import "./missing.less" 失败只会警告，接着编译空内容；VS Code 的 Easy LESS 插件在 v1.80+ 后已停更，常静默跳过编译且无日志；Vue 单文件组件中每个 <style lang="less"></style> 是独立上下文，变量不共享 —— 引用未定义变量就导致该块输出为空 CSS。
排查动作要落在构建产物上：
- 直接查看最终生成的
.css文件（不是 .less），用文本编辑器打开，搜@import是否全部解析为真实 CSS 规则，还是原样保留 - 检查是否有零宽字符（U+200B）、中文标点混入、或 BOM 头 —— Less 解析器遇不可见字符立即中止
- 确认路径别名（如
~@/styles/vars.less）是否被less-loader正确识别；若用了 Webpackresolve.alias，需在less-loader配置中显式传paths
最易被忽略的兼容断层：旧 Safari 对 CSS 语法糖的容忍度为零
比如 grid-template-areas: "a b" / "c d" 中的斜杠分隔符，旧 Safari 只认空格分隔；gap: 16px 被压缩器拆成 row-gap: 16px 却没保留 gap 声明；* { box-sizing: border-box } 被塞进 @media 块里 —— 这些都不是 Less 的问题，而是编译后的 CSS 恰好踩中了 Safari 旧内核的解析盲区。
真正可靠的验证方式，永远是：在真机 Safari 上打开开发者工具 → Computed 面板 → 搜索关键属性 → 看它是否生效，而不是依赖编译过程有没有报错。
