variables.less必须放在所有样式文件最顶部显式引入，因其变量仅在当前编译上下文生效；错误写法包括嵌套声明、缺@前缀或混入中导入，正确做法是每个.less文件首行用绝对路径@import并仅声明带@和分号的语义化变量。
variables.less 必须放在所有样式文件最顶部显式引入
Less 没有真正意义上的“全局变量”，@primary-color 这类变量只在当前编译上下文生效。常见错误是把 @import "variables.less" 写在选择器内部、.btn { ... } 之后，或混入（mixin）里——这时变量根本不会被识别。
正确做法：每个用到主题色的 .less 文件，第一行必须是 @import "variables.less";，路径要准确（推荐用 path.resolve() 绝对路径），且该文件本身只做一件事：声明带 @ 前缀的语义化变量，结尾加分号，不写任何样式规则。
-
@primary-color: #007bff;✅ 正确命名 +@前缀 + 分号 -
primary-color: #007bff;❌ 缺@，Less 当成无效 CSS 属性丢弃 -
.header { @text-color: #333; }❌ 嵌套块内声明，作用域仅限该选择器
Vue 单文件组件中 @import 失效？得靠构建工具注入
@import 在 <style scoped lang="less"> 里不生效，不是语法错，而是 Vue 的 scoped style 是独立编译单元，@import 只影响当前块，无法跨组件共享。
真正实现“一次定义、处处可用”，必须借助构建工具在编译时注入：
立即学习“前端免费学习笔记（深入）”；
- Vue CLI 用户用
style-resources-loader，vue.config.js中pluginOptions['style-resources-loader'].patterns必须填绝对路径，不能写@/styles/variables.less - Vite 用户用
vite-plugin-style-import，patterns同样要用path.resolve() - 重启 dev server 才会生效，热更新不触发 loader 重载
别指望 @primary-color 能运行时切换，真换肤靠 --primary-color
@primary-color: #007bff 是编译期静态值，最终生成的 CSS 里全是硬编码，浏览器里没有“重新编译 Less”的机制。所谓“动态切换”，本质是让 Less 编译结果读取 CSS 自定义属性。
在 variables.less 中这样桥接：
@primary-color: var(--primary-color, #007bff);
JS 切换时调用：
document.documentElement.style.setProperty('--primary-color', '#ff6b6b');
-
lighten(@primary-color, 10%)会失败，因为 Less 函数不接受var()—— 需提前算好备用值，比如定义--primary-hover: #40a0ff; - 深色模式建议用
@media (prefers-color-scheme: dark)或手动切class，别依赖 Less 编译逻辑
modifyVars 不是运行时 API，它只触发一次重编译
modifyVars 是 Less 编译期配置项，用于 less-loader 或 less.render() 中覆盖变量值。它不是前端 JS 直接调用的 API，更不是“点击就变色”的魔法开关。
典型使用场景是 UI 库（如 antd）的主题定制：构建时传入 { '@primary-color': '#1890ff' }，Less 重新编译输出新 CSS。开发时若改了 variables.less 但页面没变化，大概率是 less-loader 没配 modifyVars，或变量路径没被主入口 @import 进来。
最容易被忽略的是变量命名冲突——比如你定义的 @primary-color 和 Element Plus 的同名变量加载顺序不对，会导致 UI 异常。检查最终输出的 CSS 源码，确认关键变量值是否是你期望的。
