根本原因是Less编译器不识别Vite的@别名，additionalData中使用@/styles/variables.less会导致@import静默失败，变量文件未加载；必须用path.resolve(__dirname, 'src/styles/variables.less')写绝对路径。
为什么构建时Less变量突然undefined
根本原因不是配置漏了，而是additionalData里用了@/styles/variables.less这类别名路径——Less编译器在vite build阶段不识别Vite的alias，@import静默失败，变量文件压根没加载。你看到的color: @primary-color直接被当成未定义标识符，最终编译成color: @primary-color（浏览器忽略），或回退到默认值（如果用了modifyVars但路径错，也会丢）。
- 验证方式：在
variables.less第一行加@debug "loaded";，构建日志里没输出，就说明它根本没进Less编译流程 - 常见静默失败写法：
additionalData: `@import "@/styles/variables.less";` - 开发环境可能“碰巧”生效（因HMR或缓存），但构建必定失效
必须用path.resolve()拼绝对路径
path.resolve(__dirname, 'src/styles/variables.less')是唯一可靠写法。Windows反斜杠、monorepo中包路径偏移、process.cwd()不稳定——这些全靠__dirname锚定配置文件位置来规避。
- 确保已
import path from 'path'，否则path.resolve报错 - 别名
@/只在JS模块解析层有效，CSS预处理器层完全不走这个逻辑 - 路径必须真实存在且可读，构建时Node.js会校验，失败直接中断（不是警告）
- 示例正确配置：
additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.less')}";`
modifyVars和additionalData别混用
二者作用机制完全不同：modifyVars只影响顶层Less渲染上下文，对@import进来的子文件无效；additionalData是前置注入，优先级更高。同时配置时，modifyVars会被覆盖，变量定义实际只来自additionalData导入的文件。
- 纯颜色/尺寸变量：用
modifyVars最简，但仅限静态值，不支持@mixin - 含
.clearfix()等mixin：必须用additionalData + @import，且确保variables.less里没写执行性样式（如body { margin: 0 }） - 错误组合：
modifyVars设'@primary-color': '#1890ff'，又在additionalData里@import同名变量文件——后者会覆盖前者，且无法动态切换
构建产物里变量还在，但运行时没效果
这通常不是构建问题，而是CSS变量作用域或加载时机问题。Less变量在构建时已转为固定值，所谓“丢失”其实是CSS自定义属性（--primary-color）没全局生效。
立即学习“前端免费学习笔记（深入）”；
-
:root声明必须放在非scoped的<style>里，<style scoped>内写:root会被忽略 - 异步路由组件加载时，若其样式依赖的CSS变量文件还没加载完，就会短暂 fallback——检查Network面板确认
variables.css是否200且早于组件chunk加载 - 动态主题切换必须用
document.documentElement.style.setProperty('--primary-color', '#52c418')，别试图改Less变量
variables.less是否被至少一个样式文件显式触发加载、以及scoped和:root之间那层看不见的作用域隔离。 
