Less变量无自动全局作用域，必须在每个.less文件顶部显式@import "variables.less"；变量定义须集中于该文件顶层，不可嵌套或延迟引入，且路径需准确，否则无法生效。
变量必须集中定义在 variables.less 顶层，且所有组件文件顶部显式 @import
Less 没有真正的“全局作用域”，@import 的顺序和位置直接决定变量是否可用。常见错误是把 @import "variables.less" 写在选择器内部、混入（mixin）里，或放在样式规则之后——这些都会导致变量无法被识别。
-
variables.less只做一件事：声明带@前缀的语义化变量，如@primary-color: #3b82f6;，结尾加分号，不写任何样式规则 - 每个用到主题色的
.less文件，第一行必须是@import "variables.less";，不能嵌套、不能延迟 - Vue 单文件组件中
<style scoped>不支持@import生效，需通过style-resources-loader或 Vite 的vite-plugin-style-import注入 - 路径必须准确：Webpack 中推荐用
path.resolve(__dirname, 'src/styles/variables.less')，避免相对路径错位
别指望 @primary-color 能运行时切换，真正可交互的是 --primary-color
Less 变量是编译期静态值，@primary-color 最终会被替换成 #3b82f6 写死进 CSS。点击换肤不是改 Less 变量，而是改 CSS 自定义属性，再让 Less 编译结果读它。
- 在
variables.less中这样桥接：@primary-color: var(--primary-color, #3b82f6); - JS 切换时调用：
document.documentElement.style.setProperty('--primary-color', '#ef4444'); - 注意：Less 函数如
lighten(@primary-color, 10%)会失败，因为lighten()不接受var()；需提前算好备用值，例如定义--primary-hover: #40a0ff; - 第三方 UI 库（如 Ant Design）若未开启 CSS 变量支持，它们的样式不会响应你的
--primary-color
哪些地方最容易漏掉颜色引用？伪元素、SVG、表单状态、第三方库
改完 :root 或 variables.less 后按钮变色了，但页面仍有旧色，大概率是这些隐性样式没同步更新。
-
::before/::after里的background、color、border-color必须显式写成var(--primary-color) -
input:focus、select:disabled、button:active等状态样式常被忽略，要逐个检查并替换 - 内联 SVG 的
fill和stroke属性不会继承 CSS 颜色，需手动加fill: var(--primary-color); - 图标字体（如 Font Awesome）默认用
currentColor，但若用了固定color值，也要改成变量 - Ant Design、Element Plus 等库若用独立 CSS 文件引入，其颜色不会随你的变量变化；要么启用它们的 CSS 变量模式，要么覆盖其 class
Webpack 中 modifyVars 是构建时行为，不是前端实时换肤
很多人误以为配置了 modifyVars 就能点一下按钮立刻换色——其实它只在 less-loader 编译阶段起作用，本质是重新生成一份 CSS 文件。
立即学习“前端免费学习笔记（深入）”；
-
modifyVars的键名必须带@，且与variables.less中完全一致，例如'@primary-color': '#1890ff' - 它只对被
@import进主入口（如main.less）的变量生效；孤立的、未导入的变量文件不会被覆盖 - 开发时修改
modifyVars后，需确保 Webpack 热更新触发了 less-loader 重编译，否则浏览器看不到变化 - 生产环境预设多套主题（light/dark），靠构建脚本传不同
modifyVars参数生成多份 CSS，再按需加载
--primary-color 值，前提是所有颜色引用都已透传到位。最耗时的从来不是切换动作本身，而是前期把那些散落在 ::placeholder、svg path、input[type="checkbox"] 里的硬编码颜色一个个揪出来替掉。 
