Less本身不支持运行时懒加载，其@import仅在编译期静态合并代码，真正的CSS懒加载需依赖构建工具配置与DOM动态注入。
Less 本身不支持 Lazy Loading 模式——它是个编译时工具，不是运行时加载器。所谓 “Less 的 Lazy Loading” 是常见误解，实际是前端构建或运行时 CSS 加载策略被错误归因到 Less 头上。
Less 编译过程根本不涉及加载时机
Less 文件（.less）必须提前通过 lessc、Webpack 的 less-loader 或 Vite 的 less 插件编译成 CSS，才能被浏览器处理。编译发生在构建阶段，和页面是否“懒加载”无关。
- 你写
@import "module.less";，只是告诉编译器“把这文件内容合并进来”，不是让浏览器在 runtime 动态 fetch - 编译后输出的 CSS 是静态字符串，哪怕源文件用了 20 层嵌套
@import，最终也只生成一个（或几个）.css文件 - 所谓“按需编译”需要手动切分
.less文件 + 配合构建工具做 code splitting，Less 自身无此能力
真正影响 CSS Lazy Loading 的是打包和加载方式
决定 CSS 是否懒加载的，是构建产物如何被注入 DOM，而不是 Less 怎么写。关键节点在：
-
<link rel="stylesheet">标签是否动态插入（如路由切换时document.head.appendChild(link)） - Webpack 中是否对 CSS 使用
mini-css-extract-plugin+splitChunks配置分离出异步 chunk - Vite 中是否启用
build.cssCodeSplit: true，并配合import('./style.module.less')这类动态导入（注意：Vite 会把.less当作模块处理，但本质仍是预编译） - 使用
rel="preload"或rel="prefetch"控制资源获取时机，和 Less 无关
容易踩的坑：@import 和动态加载混淆
很多人以为在 Less 里写 @import (reference) "utils.less"; 就能“不立即加载”，其实这只是编译期指令：它让 utils.less 内容不直接输出 CSS，仅用于 mixin/variable 引用——但该文件仍被同步读取、解析、参与编译，不会减少 HTTP 请求，也不延迟样式生效时间。
立即学习“前端免费学习笔记（深入）”；
-
@import (inline)：把内容以注释形式插入，体积增大，但不产生额外请求 -
@import (less)：强制按 Less 解析（而非 CSS），不影响加载行为 - 浏览器端无法识别 Less 的
@import；它只认 CSS 的@import url(...)，而后者已被现代实践弃用（阻塞渲染、无并行加载）
真正要实现 CSS 懒加载，得绕过 Less 的思维定式，从构建配置和 runtime 注入逻辑入手。Less 只负责“怎么写样式”，不负责“什么时候给浏览器”。最容易被忽略的是：即使你把每个组件的 .less 单独拆包，若最终打包结果仍全量注入 <head>，那跟没拆一样。
