Less变量无法覆盖全局样式的根本原因是其编译时特性：变量仅在编译期生效、不跨作用域传播、不提升不继承；若themes/dark.less中@primary-color未参与按钮样式编译，或因@import顺序错位、!default被先声明覆盖、additionalData注入干扰、单文件组件独立作用域隔离等原因，均会导致覆盖失效。
Less变量无法覆盖全局样式，根本原因不是“没写对”，而是你误把编译期变量当成了运行时CSS变量——它压根不提升、不继承、不动态作用于已生成的CSS规则。
Less变量只在编译时生效，且不跨作用域传播
你在themes/dark.less里写@primary-color: #333;，但按钮样式仍用的是#007bff，大概率是因为：该变量根本没参与编译进那个按钮的CSS块。Less变量的作用域由@import顺序和声明位置决定，不是“全局可见”。
- 变量只在其首次声明（或带
!default）的作用域内有效，不会自动“冒泡”到父文件 - 如果组件样式文件（如
button.less）在变量定义前就被@import了，那它编译时看到的还是旧值 - Vue或React项目中，单文件组件里的
<style lang="less"></style>是独立作用域，不自动继承variables.less里的变量
为什么!default没起作用？
你以为写了@primary-color: #dc3545 !default;就能兜底覆盖，但实际可能被绕过：
-
!default只在变量“尚未被声明过”时才赋值；如果框架源码里已经用@primary-color: #007bff;硬编码定义了一次，你的!default就完全失效 - 某些UI库（如View UI、Ant Design）的Less入口文件会主动
@import自己的variables.less，把你后写的覆盖文件挡在了作用域外 - Webpack的
less-loader若配置了additionalData，它会把注入内容插到每个Less文件最开头——可能让你的!default变成“第二次声明”，直接被忽略
Vue/React中全局变量“看似生效”实则脆弱
用style-resources-loader或vue.config.js里配lessOptions.additionalData自动注入变量，看起来一劳永逸，但隐患明显：
- 所有组件样式都共享同一份变量快照，一旦某个组件里重定义了
@primary-color，后续组件就会意外继承这个局部值 - TSX或JSX中用
import './index.less'加载，若该文件依赖未注入的变量，编译直接报错Variable @xxx is undefined - 热更新（HMR）时，变量注入可能不同步，导致样式闪动或回退到默认值
- Vite项目中
vite-plugin-style-import等插件与additionalData冲突，变量注入顺序不可控
真正可靠的覆盖方式只有两种
别再指望“改一个变量，全站变色”。Less主题切换必须回归编译本质：
- 拆出纯变量文件（
variables.less），所有样式文件只通过@import "variables.less"引用，禁止硬编码颜色值 - 按主题建分支目录（
themes/light.less、themes/dark.less），里面只写要改的变量，且全部带!default，例如：@primary-color: #333 !default; - 构建时用脚本生成多套CSS：
lessc main.less --modify-var="@theme=light" > light.css，再用JS切换<link>标签 - 如果必须运行时换肤，放弃Less变量，改用CSS自定义属性（
--primary-color），配合:root动态设置
最容易被忽略的一点：Less里@import不是“加载”，是“文本拼接”。你看到的“变量覆盖”，其实是编译器按行合并后，靠声明顺序和!default机制做的静态判定——没有中间态，也没有调试时的“实时刷新”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
