根本原因是@import顺序错误、作用域隔离或路径失效：变量必须在引用前通过顶部@import同步注入，否则编译器跳过不回溯；单文件组件中独立编译，需显式导入；vite中别名路径无效，须用path.resolve转绝对路径。
为什么
根本不是变量写错了，而是它压根没被编译器“看见”。Less不回溯、不预加载，所有@import必须出现在使用变量的语句之前，且必须在当前<style></style>块内显式声明。Vue单文件组件中每个<style lang="less"></style>都是独立编译上下文，不会自动继承其他文件或入口的变量。
常见错误包括：
-
@import写在变量引用之后（如先写color: @primary-color;再@import "vars.less"） - 误以为
main.js里import "@/styles/vars.less"能让所有组件生效——这只会触发一次编译，不注入到组件样式作用域 - 在
<style scoped></style>里漏写lang="less"，浏览器当纯CSS处理，@primary-color被原样丢弃 - 文件名是
variables.less但@import写成@import "@/styles/variables"（缺.less扩展名），Less引擎静默跳过
Vite中@/别名在@import里为什么总失效
@import语句由Less运行时执行，而Vite的路径别名（如@/）只在Vite插件层生效，进入Less编译阶段时已不可见。此时@import "@/styles/vars.less"会被当作字面路径尝试加载，必然失败，且不报错、不中断、不触发HMR。
正确做法是用path.resolve()转绝对路径：
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
css: {
preprocessorOptions: {
less: {
additionalData: `@import "${path.resolve(__dirname, 'src/styles/vars.less')}";`
}
}
}
})
注意三点：
- 必须
import path from 'path'，不能用字符串拼接（Windows反斜杠会崩） - 路径基准用
__dirname，不是process.cwd() - 确保
vars.less第一行加@debug "loaded";，终端无输出就说明路径完全没走通
Vue CLI项目里globalVars配置为什么变量能用但mixin报错
css.loaderOptions.less.globalVars底层调用的是Less的modifyVars机制，它只接受扁平键值对，所有值都会被强制转成字符串字面量。这意味着：
-
@import、.my-mixin() { }、@function等语法一概不支持 - 无法引用其他变量（如
@secondary: darken(@primary, 10%)会因darken未注册而报错） - 别名路径（如
~@/styles/vars.less）直接解析失败
真正需要全局mixin或嵌套逻辑时，必须换用style-resources-loader，它把整个文件内容前置注入，等价于手动在每个<style></style>顶部写@import。
为什么改了vars.less但样式没更新（HMR静默失败）
HMR不触发，大概率是因为vars.less根本没被Less引擎加载。Vite的CSS监听只管文件变更事件，但additionalData里的@import是否生效，取决于Less能否找到并解析那个路径——找不见，就不监听，也不编译，更不热更。
验证步骤很直接：
- 运行
vite --debug css，改一次vars.less，看日志里有没有它的change事件 - 在
vars.less第一行加@debug "loaded";，终端没输出=路径错或文件没进Less流水线 - 检查
javascriptEnabled: true是否开启（Less 6+默认false，不开则@import被忽略） - 确认没同时配
additionalData和modifyVars——后者会被前者覆盖，改了也白改
最容易被忽略的是：你看到的CSS里还有@primary-color，说明Less编译中途就断了，但构建工具没报错也没中断，它只是把原始代码透传给了浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
