根本原因不是Less编译失败，而是生成的CSS不符合浏览器执行条件或被后续流程丢弃；90%“没生效”是最终CSS缺失@media规则或浏览器不匹配，需检查语法、嵌套绑定、变量用法、构建链路及viewport配置。
根本原因不是 Less 编译失败，而是生成的 CSS 本身不符合浏览器执行条件，或被后续流程丢弃。你看到的“没生效”，90% 情况下是最终输出里压根没那段 @media 规则，或者规则写了但浏览器根本不匹配。
嵌套写法导致编译出非法 CSS
Less 允许在选择器内写 @media，但必须严格满足语法结构。常见翻车点：
-
@media后面必须紧跟括号和条件，比如@media (max-width: 768px)；写成@media(max-width: 768px)（括号紧贴）或@media max-width: 768px（漏括号）会直接报ParseError: missing opening '{' - 嵌套时漏掉
&绑定父选择器：比如.nav { @media (max-width: 768px) { display: none; } }编译后是@media (max-width: 768px) { display: none; }—— 没有选择器，浏览器无视这条规则 - 正确写法是
.nav { @media (max-width: 768px) { & { display: none; } } }，&显式展开为.nav，最终生成@media (max-width: 768px) { .nav { display: none; } }
变量插值误用导致编译静默失败
Less 不允许把媒体查询条件整个当变量塞进去，这种写法看似省事，实则无效：
- ❌ 错误：
@mq-sm: ~"(max-width: 768px)"; @media @mq-sm { ... }→ 编译直接报Invalid CSS after "@media" - ✅ 正确：定义带单位的数值变量，再放进括号里：
@sm: 768px; @media (max-width: @sm) { ... } - 如果要用组合断点（比如
min-width+max-width），必须封装成 mixin：.media-between(@min, @max) { @media (min-width: @min) and (max-width: @max) { @content; } }，然后调用.media-between(768px, 1024px) { ... }
构建链路中 @media 被删或错位
Less 编译完只是第一步，Webpack 或 Vite 构建过程可能把 @media 干掉：
立即学习“前端免费学习笔记（深入）”；
-
css-loader的importLoaders配置不对，会导致它把 Less 编译后的@media当普通规则处理，提取时丢失结构 - 压缩工具（如
cssnano）默认开启discardDuplicates或mergeLonghand，可能误判并删除“看起来重复”的媒体查询块 - PostCSS 插件（比如
autoprefixer）只认标准 CSS，不能对 Less 源码运行；必须确保它作用于 Less 编译后的结果，而不是源文件 - 验证方法：打开最终产出的
.css文件，搜索@media，确认你要的那条规则是否完整存在、位置是否合理（通常应放在对应基础样式之后）
真机不生效但 DevTools 里看着正常
这是最迷惑人的场景，根源往往不在 Less，而在 HTML 或浏览器解析逻辑：
- 缺失或位置错误的
<meta name="viewport">：必须唯一、位于最顶部，且内容为width=device-width, initial-scale=1；Safari iOS 一旦没在早期解析到它，就按 980px 渲染，@media (max-width: 768px)永远不触发 - 用了已废弃的
max-device-width：现代 Safari/iOS/macOS 返回的是逻辑像素，max-device-width: 768px基本不匹配；一律改用max-width - CSS 文件加载失败或前面有语法错误：比如上一行
@keyframes缺少}，浏览器会跳过后续所有规则，包括整个@media块 - 样式被更高权重规则覆盖：检查 Elements 面板里目标元素的 Computed 样式，看对应属性是否被划掉；如果是，说明有别的规则优先级更高，跟媒体查询是否生效无关
最容易被忽略的是：Less 编译正常 ≠ 浏览器执行正常。得一路追踪从 Less 源码 → 编译后 CSS → 构建产物 → 真机渲染，每个环节都可能断掉。尤其注意 <meta name="viewport"> 和最终 CSS 文件里是否存在你写的那条 @media 规则——这两点一错，其他全白搭。
