@import "@/styles/vars.less" 必然失败，因Less引擎不识别@/别名，仅按文件系统路径查找，该路径映射由Vite/Webpack在JS层实现，Less解析时已失效，导致变量undefined、HMR不触发、样式编译为空。
Less 里写 @import "@/styles/vars.less" 必然失败，不是配置漏了，是 Less 引擎压根不认 @/ 这种别名。
为什么 @import "@/xxx" 静默失效？
Less 编译器只按文件系统路径查找，@/ 是 Vite 或 Webpack 在 JS 层做的路径映射，到 Less 解析阶段早已退出作用域。它不会报错，但变量 undefined、HMR 不触发、样式块编译为空——所有后续规则都进不了作用域。
- 验证方法：在
vars.less第一行加@debug "loaded";，启动开发服务器，控制台没输出就说明根本没加载 - 常见表现：开头一个
@import "@/styles/vars.less"失败，后面写的全部样式都不见了 - 错误路径 404 不是“跳过”，而是让整个文件编译中断，后续规则全丢
正确写法只有两种：加 ~ 前缀 或 用 path.resolve()
必须显式告诉构建工具“这是模块路径”，否则 Less 就当字面量处理。
-
@import "~@/styles/vars.less";——~是 Webpack/Vite 识别模块路径的信号，less-loader和 Vite 的 CSS 插件能接住 -
@import "${path.resolve(__dirname, 'src/styles/vars.less')}";—— 仅适用于additionalData注入场景；__dirname必须指向 vite.config.ts 所在目录，不能拼字符串（Windows 反斜杠会崩） - 别在
additionalData里混用@/，此时 Vite 插件已退出，@/就是纯文本，找不到文件
javascriptEnabled: true 必须显式开启
即使路径写对了，变量还是 undefined，大概率是这个开关没开。Less 默认禁用 JS 表达式，而动态解析路径（比如 path.resolve()）属于 JS 能力范畴。
立即学习“前端免费学习笔记（深入）”；
- Vite 中必须放在
css.preprocessorOptions.less下，不是顶层less选项 - Webpack 5+ 中要包进
lessOptions对象：{ lessOptions: { javascriptEnabled: true } } -
modifyVars和additionalData是竞争关系，后者优先级更高；开了javascriptEnabled才能让additionalData里的@import真正执行
url() 和 @import (css) 同样受别名限制
Less 对 url() 和 @import (css) 的路径解析逻辑一致，都不认 @/，必须加 ~ 或走绝对路径。
-
background-image: url("~@/assets/logo.png");—— 正确，~触发模块解析 -
@import (css) "~@/assets/reset.css";—— 正确，~让 css-loader 接管路径 -
@import (css) "@/assets/reset.css";—— ❌ 直接报错或 404，@/不被识别 - 注意：
@import (css)只跳过 Less 编译，不触发构建工具重写内部@import url()，那些仍由浏览器运行时加载，可能静默失败
最易忽略的点是：路径是否真实存在且可读。别只看 IDE 是否提示，运行 node -e "console.log(require('fs').existsSync('<your-resolved-path>'))"</your-resolved-path> 验证，尤其在 monorepo 或构建阶段，__dirname 指向偏差会导致 path.resolve() 解析出错。
