LESS变量无法跳转的根本原因是VSCode未启用LESS语言服务，需安装Less IntelliSense或vscode-less等支持语言服务器的扩展，并确保状态栏显示Less模式、@import路径正确、变量声明顺序合规且配置paths路径。
LESS 变量无法跳转定义，根本原因不是语法写错了，而是 VSCode 默认不解析 .less 文件里的变量引用关系——它压根没把 @color-primary 当成一个可索引的符号。
LESS 语言服务未启用或缺失
VSCode 原生不支持 LESS 语义分析。即使装了“Easy LESS”或“LESS Compiler”这类编译型扩展，它们只负责生成 CSS，不提供跳转能力。
- 必须安装带语言服务器能力的扩展，例如
Less IntelliSense（作者：mrmlnc）或vscode-less（作者：mrcrowl），且确认已启用 - 打开命令面板（
Ctrl+Shift+P），运行Developer: Toggle Developer Tools，在 Console 中搜less或Failed to start language server，看是否有加载失败日志 - 状态栏右下角应显示
Less（不是Plain Text或CSS），点击它手动切换语言模式
@import 路径错误导致变量未被索引
LESS 变量跳转依赖于完整的导入链被语言服务解析。如果 @import 路径写错、用了别名但没配 paths、或路径是相对却不在当前工作区根目录下，变量就会“不可见”。
- 检查所有
@import语句是否用双引号或单引号包裹，比如@import "variables.less";（不加引号会直接报错，但有些扩展会静默忽略） - 确保被导入的文件实际存在于工作区中——VSCode 不会跨工作区目录索引，哪怕物理路径存在
- 若用了 Webpack 别名（如
@/styles/vars.less），标准 LESS 扩展无法识别；需改用支持别名的扩展（如stylelint-plus配合自定义配置），或临时改成相对路径验证
变量作用域与声明顺序问题
LESS 是从上到下编译的，变量必须先声明、后使用，且作用域不跨 @import 边界（除非显式 extend 或嵌套）。
- 在
A.less中@import "B.less"，然后用@var——这个@var必须定义在B.less里，不能只在A.less的@import后面声明 - 局部变量（如
& { @color: red; }）不会被索引，跳转功能只处理顶层变量 - 避免用
!important或插值（@{name}）参与变量名构造，这类动态形式无法静态分析
工作区配置缺失 less.compile.options.paths
当项目结构复杂（如 src/styles/ 和 node_modules/xxx-styles/ 并存），LESS 扩展需要明确告诉它去哪找被 import 的文件，否则变量定义就“找不到家”。
- 在工作区根目录的
.vscode/settings.json中添加：
{
"less.compile.options": {
"paths": ["src/styles", "node_modules/xxx-styles"]
}
}
- 注意：该配置仅对支持此字段的扩展生效（如
vscode-less），Less IntelliSense使用的是less.sassImportResolve风格，需查对应文档 - 修改后重启 VSCode 或重载窗口（
Ctrl+Shift+P→Developer: Reload Window）
最常被忽略的一点：LESS 变量跳转不像 TypeScript 那样有强类型索引，它高度依赖导入路径的字面匹配和文件是否被语言服务主动加载——哪怕只差一个 ./，变量就彻底“隐身”。动手前先确认状态栏语言模式和 Console 里有没有静默失败的日志，比盲目改配置更省时间。
