根本原因是单文件组件中<style lang="less">为独立编译单元，@import仅局部生效且重复解析；必须通过构建工具additionalData全局注入变量，同时@primary-color（编译期）与--primary-color（运行时）需桥接而非混用，否则颜色函数失效。
不能靠 @import 自动把变量塞进所有文件，必须用构建工具层注入；CSS 变量（--primary-color）和 Less 变量（@primary-color）是两套东西，混用时颜色函数会失效。
为什么 @import 放在组件里不管用
Vue 或 React 单文件组件的 <style lang="less"> 是独立编译单元，每个组件都单独走一遍 Less 编译流程。你在某个组件里写 @import "variables.less";，只对该组件生效，且重复解析开销大、热更新可能卡住。
- Less 没有“全局作用域”，只有导入顺序决定可见性
- 手动
@import容易漏写、路径写错（比如漏.less后缀）、或被 scoped 隔离后找不到变量 - 构建工具（如 Vite）默认不支持别名（
@/styles/variables.less）直接解析，会报Cannot find module
additionalData 是唯一靠谱的注入方式
它让构建工具在每次编译前，自动把指定内容拼到每个 Less 文件最开头，等效于所有文件顶部都写了 @import。
- Vue CLI 项目：配
vue.config.js的css.loaderOptions.less.additionalData，支持@/别名 - Vite 项目：必须用
path.resolve()写绝对路径，@/别名默认不识别 - 多个文件用分号分隔：
`@import "${path.resolve(__dirname, 'src/styles/variables.less')}"; @import "${path.resolve(__dirname, 'src/styles/mixins.less')}";` - 千万别写成数组或对象——
additionalData只接受字符串
如何让 @primary-color 和 --primary-color 同步又不冲突
Less 变量用于编译期计算（比如 lighten(@primary-color-base, 10%)），CSS 变量用于运行时切换。二者要桥接，但不能混着算。
立即学习“前端免费学习笔记（深入）”；
- 在
variables.less中定义原始值：@primary-color-base: #1890ff; - 导出为 CSS 变量：
:root { --primary-color: @primary-color-base; } - 需要变亮的颜色，先用 Less 计算再赋值：
@primary-color-light: lighten(@primary-color-base, 10%); :root[data-theme="light"] { --primary-color: @primary-color-light; } - 样式中一律用
color: var(--primary-color);，别用@primary-color—— 后者是静态值，换主题不会变
多主题生成别手写 data-theme 样式块
用 Less 的 @themes Map + each() 自动生成，避免漏写、命名不一致、维护困难。
- 定义主题 Map：
@themes: { light: (#fff, #333), dark: (#1a1a1a, #eee) }; - 遍历生成：
each(@themes, .(@colors, @theme) { :root[data-theme="@{theme}"] { --bg-color: extract(@colors, 1); --text-color: extract(@colors, 2); } }); - JS 切主题只需改
document.documentElement.setAttribute('data-theme', 'dark')，CSS 层完全不用动 - 注意：
each()生成的规则必须放在:root下，否则无法被子元素继承
真正容易被忽略的是：Less 编译完就没了，@import 顺序、additionalData 路径、var(--x) 和 @x 的分工，这三处任一出错，主题就断在某个环节，而且错误不报在控制台，只表现为颜色没变、间距错乱——得去检查最终生成的 CSS 里 --primary-color 到底有没有被写进去、值对不对。
