less没有真正的全局变量，所谓“全局生效”依赖@import顺序或additionaldata前置注入；vue单文件组件中直接@import会导致重复解析、hmr失效和路径问题，必须通过less-loader的additionaldata统一注入变量文件。
Less 没有“全局变量”概念，所谓“全局生效”，全是构建时靠 @import 顺序或 additionalData 前置拼接实现的——你得手动控制作用域边界，否则变量根本不可见。
为什么 @import "variables.less" 放在组件里不生效
Vue 单文件组件的 <style lang="less"></style> 是独立编译单元，每个都走一遍 less-loader，彼此隔离。你在组件里写 @import "variables.less";，确实能用，但会带来三个问题：
- 每次编译都重复解析同一份
variables.less，拖慢构建速度 - 热更新（HMR）时可能失效，改了变量要手动刷新页面
- 如果多个组件各自
@import，又没统一路径写法（比如有的漏.less后缀），容易静默失败或报NameError: variable @xxx is undefined
Webpack / Vue CLI 必须配 additionalData 才可靠
这是目前最可控、最通用的做法，绕过第三方 loader，直击 less-loader 配置层。关键点不在“加不加”，而在“怎么加”：
-
additionalData必须是字符串或返回字符串的函数，内容以@import开头，例如：`@import "@/styles/variables.less";` - 若用
@/别名，必须提前在resolve.alias中正确定义，否则报Cannot resolve import - 路径不能写相对路径（如
"../styles/variables.less"），Webpack 会找不到；也不能用别名路径（如"@/styles/variables.less"）而不配 alias - 即使启用 CSS Modules，
additionalData注入的变量依然可用，但注意：变量不能出现在:global{}外的选择器嵌套内部（Less 语法限制）
Vite 项目优先用 css.preprocessorOptions.less.additionalData
Vite 原生不支持自动注入，vite-plugin-style-import 看似方便，但它的 patterns 字段只认绝对路径，相对路径或别名会静默失败，调试困难。更轻量直接的做法是：
- 在
vite.config.ts的css.preprocessorOptions.less中配置：additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.less')}";` - 必须用
path.resolve()构造绝对路径，__dirname不能省，否则 HMR 不触发重编译——改了variables.less内容，样式不会自动更新，得手动刷新 - 不要尝试用
@use或@forward，Less 4 不支持这些 Sass 语法
变量文件本身必须干净、顶层、无副作用
variables.less 不是样式入口，它只负责声明，不能夹带逻辑：
- 所有变量必须在文件最顶部声明，不能包裹在选择器、mixin 或媒体查询里，否则作用域受限
- 禁止在该文件中
@import其他含变量定义的文件（比如mixins/border-radius.less），否则会意外覆盖值 - 命名必须带
@前缀且结尾加分号，例如：@border-radius: 6px;，写成border-radius: 6px;会直接被忽略 - 如果要支持主题切换，变量值应桥接 CSS 自定义属性，例如：
@primary-color: var(--primary-color, #1890ff);，否则lighten(@primary-color, 10%)这类函数会因运行时无法解析var()而报错
最容易被忽略的一点：Less 变量是纯编译期产物，改完变量文件后，如果构建工具没监听到变化（尤其是 Vite 的 additionalData 注入内容），样式就不会更新——这不是 bug，是机制使然。别指望“保存就生效”，得确认路径对、拼接对、HMR 配置对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
