Less不支持变量动态@import，因@import是编译期静态行为，不展开变量插值；可行方案是预导入所有主题文件，再用变量+@if/@extend控制生效规则，或交由构建工具/运行时动态加载。
Less 本身不支持根据变量值动态 @import CSS 文件——这是编译期静态行为，@import 路径必须是字面量字符串或拼接后的确定路径，不能依赖运行时（或编译时）计算出的变量值做条件分支。
Less 的 @import 不接受变量插值（除非路径完全静态拼接）
你可能会尝试这样写：
@theme: "dark";
@import "@{theme}.css";
但会直接报错：File not found: dark.css 或更隐蔽地失败——因为 Less 解析器在解析 @import 时，**不展开变量插值**（即使用了 @{...}），只接受纯字符串字面量或带引号的静态路径。
以下写法全部无效：
-
@import "@{theme}.less";→ 报错或静默忽略 -
@import concat(@theme, ".css");→concat不是 Less 内置函数，语法错误 -
@import url("@{theme}.css");→url()是 CSS 函数，不是 Less 导入机制
可行替代方案：用变量控制选择器/规则开关，而非文件加载
真正可落地的做法，是把不同主题的样式都提前 @import 进来，再用变量控制哪部分生效：
// themes/dark.less
.dark-theme {
--bg: #1a1a1a;
--text: #eee;
}
// themes/light.less
.light-theme {
--bg: #fff;
--text: #333;
}
// main.less
@import "themes/dark";
@import "themes/light";
@theme: dark; // ← 编译前手动设值（或通过构建工具注入）
body {
@if (@theme = dark) {
@extend .dark-theme;
}
@else {
@extend .light-theme;
}
}
注意：@if 是 Less 3.5+ 支持的条件指令，但它**只影响生成的 CSS 规则，不跳过 @import**。所有被 @import 的文件仍会被解析、变量合并、mixin 展开——只是最终输出里可能没用到某些规则。
关键点：
- 主题 CSS 必须包裹在带命名空间的选择器内（如
.dark-theme { ... }），避免污染全局 -
@extend会生成冗余选择器，若追求极致精简，改用 CSS 自定义属性 + JS 切换class更可控 - 构建时注入变量（如 Webpack 的
less-loadermodifyVars）比硬编码@theme: dark更适合多环境
想实现“真正动态引入”？得交给构建工具或运行时
如果业务确实需要按环境/用户偏好加载不同 CSS 文件，Less 不是合适层：
- Webpack/Vite：用
require(`./themes/${theme}.css`)或动态import()配合 CSS 拆包 - HTML 中 JS 控制：
link标签动态创建并设置href，配合localStorage记住偏好 - 服务端渲染：Node.js 根据请求头或 session 决定返回哪个编译好的 CSS URL
Less 的角色始终是预处理器——它生成确定的 CSS，不参与资源调度。
最容易被忽略的一点：很多人以为 @import "xxx" 和 JS 的 import 行为类似，其实它更像 C 的 #include：无条件文本粘贴，不经过任何逻辑判断。变量、函数、条件语句，都只作用于「已导入内容内部」，无法驱动导入动作本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
