less 本身不支持 css 模块懒加载，因其是编译时预处理器，生成静态 css 文件，无运行时模块加载能力；真正懒加载需在 js 运行时通过 import() 或动态创建 link 标签实现。
Less 本身不支持 CSS 模块的懒加载——它是个编译时预处理器，生成的是静态 CSS 文件，没有运行时模块加载能力。
为什么 less 编译结果无法“懒加载”
Less 文件（如 theme.less、button.less）在构建阶段就被 lessc 或 Webpack 的 less-loader 编译成普通 CSS，最终输出的是一段字符串或一个 .css 文件。浏览器拿到的是纯 CSS，根本不知道“模块”概念，更谈不上按需注入或卸载。
- 你写的
@import "modal.less";是编译期指令，不是 JS 动态 import -
less.modifyVars()只能改变量后重新编译整个样式表，不能局部替换某一块 - 所谓“懒加载 Less”，实际是混淆了「样式按需注入」和「源码按需编译」两个阶段
真正可行的懒加载路径：用 JS 控制 <link> 或 <style></style>
如果你希望某个功能模块（比如弹窗组件）的样式只在首次打开时加载，得绕过 Less 编译流程，在运行时控制样式资源：
- 把该模块对应的 Less 单独编译为独立 CSS 文件（如
modal.css），不要合并进主包 - 用
import("/styles/modal.css")（配合style-loader或手动创建<link>） - 注意：ESM
import()加载 CSS 需要构建工具支持（Webpack/Vite 默认支持；Rollup 需rollup-plugin-css-only） - 避免重复加载：加个标记变量，如
window.__LOADED_MODAL_CSS = true，加载前先判断
示例（Vite 环境）：
async function loadModalStyles() {
if (window.__LOADED_MODAL_CSS) return;
await import("../styles/modal.css");
window.__LOADED_MODAL_CSS = true;
}
Less 可以配合做的“伪懒加载”优化
虽然不能真懒，但可以通过 Less 结构设计减少冗余，让后续 JS 加载更轻量：
- 每个业务模块写独立 Less 文件，不滥用
@import全局变量文件（避免牵一发而动全身） - 用
.mixin封装可复用逻辑，而非直接展开样式规则（减少编译后体积） - 避免在
index.less里@import所有模块；主入口只 import 基础变量和重置样式 - Webpack 中配置
less-loader的additionalData注入全局变量，而不是靠@import多次引入同一文件
真正的懒加载发生在 JS 运行时，Less 只负责把模块样式编译得干净、解耦、可拆分——剩下的事，交给 import()、document.createElement("link") 或 CSS-in-JS 库去处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
