@color报undefined是因为Less引擎在additionalData中不识别Vite的@/别名或相对路径，必须用path.resolve(__dirname, 'src/styles/variables.less')提供绝对路径，否则静默失败；modifyVars与additionalData是竞争关系，后者优先级更高。
为什么 @color 报 undefined？路径没 resolve 对
Less 引擎在 additionalData 里执行 @import 时，不认 Vite 的 @/ 别名，也不解析相对路径（比如 "./src/styles/variables.less"），只接受绝对路径。写错就静默失败——编译不报错，但变量根本没加载。
- 验证方式：在
variables.less第一行加@debug "loaded";，控制台没输出就说明没被 import 进来 - 正确写法必须用
path.resolve(__dirname, 'src/styles/variables.less')，不能拼字符串（Windows 反斜杠会崩） -
__dirname是 vite 配置文件所在目录，monorepo 下要确认它指向的是当前包的配置目录，不是根目录
modifyVars 和 additionalData 能一起用吗？能，但别混着覆盖
二者不是叠加，而是竞争关系：additionalData 注入的 @import 代码会先执行，定义的变量优先级高于 modifyVars；如果你在 additionalData 里 @import 了 variables.less，再用 modifyVars 改 '@primary-color'，后者会被忽略。
- 纯颜色/尺寸变量 → 用
modifyVars更轻量，适合构建时整站换肤 - 含
.clearfix()、.flex-center()等@mixin→modifyVars无效，必须走additionalData+@import - 想共存？可以，但明确分工：一个管变量，一个管 mixin，别让同一个变量名在两边都出现
Vue 单文件组件里 scoped 样式为啥用不了全局 Less 变量？
只要 additionalData 配对了 css.preprocessorOptions.less.additionalData，scoped 一样生效——它是在预处理器读取整个 <style lang="less"> 内容前，把代码拼在最开头，和作用域无关。
- 失效常见原因只有两个：路径没 resolve 对（见第一条），或你误用了
css.preprocessorOptions.sass配置 Less 文件 - 别在
<style scoped>里手动@import，容易漏、难维护，且scoped下某些@import行为异常 - 如果用了
less-plugin-import等插件，确保它没干扰additionalData的注入顺序
Less 循环引用导致卡死或内存溢出，怎么快速定位？
Less 的 @import 是文本拼接，不是模块加载，循环不会报语法错误，只会卡住或爆内存：FATAL ERROR: Allocation failed - JavaScript heap out of memory。
立即学习“前端免费学习笔记（深入）”；
- 临时删掉所有
@import (reference)和@import (inline)，让导入全部“实打实”输出——循环立刻暴露为Variable @xxx is undefined - 用
postcss-import替换原生@import，报错时直接打出完整链路，例如A.less → B.less → C.less → A.less - 解耦关键：新建
tokens.less作为唯一根文件，只放变量和 mixin，禁止它再@import任何其他文件
真正麻烦的从来不是配置项写在哪，而是变量到底有没有进编译器的作用域——路径 resolve 错、别名乱用、循环藏得太深，都会让你在控制台里对着 undefined 发呆半小时。
