less变量未进入全局是因为路径未正确解析、别名失效或注入时机错误；vue单文件组件中需通过additionaldata以绝对路径显式@import变量文件，并确保无语法错误、配置兼容less-loader@12的lessoptions结构。
Less变量没进全局，基本是因为它根本没被加载进来——不是配置漏了，是路径没 resolve 对、别名没生效，或注入时机错了。
为什么@primary-color在组件里还是undefined
Vue 单文件组件的 <style lang="less"></style> 是独立编译上下文，不会自动继承任何外部变量。你看到的“未注入”，90% 是因为：
- 没配
additionalData，或配了但路径写成"@/styles/variables.less"—— Less 引擎不认@/别名，静默失败 - 写了
additionalData: `@import "./src/styles/variables.less"`—— 相对路径在 Vite/Webpack 中不稳定，Windows 下反斜杠还会崩 - 在
vite.config.ts里忘了import path from 'path'，path.resolve报错，整个注入逻辑跳过 - 变量文件
variables.less本身有语法错误（比如漏分号、零宽字符），Less 解析中断，后续全丢
additionalData 怎么写才真正生效
必须用绝对路径 + 显式 @import，且确保该文件能被 Less 运行时读到：
- 正确写法：
additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.less')}";` - 验证是否加载成功：在
variables.less第一行加@debug "loaded";，启动开发服务后看终端有没有输出 - 如果用了
modifyVars，它和additionalData是竞争关系——后者优先级更高，modifyVars里同名变量会被忽略 - 别在
additionalData里写 JS 表达式（如@primary-color: darken(@secondary, 10%)），除非已设javascriptEnabled: true
Webpack + less-loader@12 的变量配置陷阱
less-loader@12 彻底废弃顶层 modifyVars 配置，所有选项必须包进 lessOptions：
- 错误写法（v12 直接报 schema error）：
{ loader: 'less-loader', options: { modifyVars: { '@primary-color': '#1890ff' } } } - 正确写法：
{ loader: 'less-loader', options: { lessOptions: { modifyVars: { '@primary-color': '#1890ff' }, javascriptEnabled: true } } } -
@import (css)路径也受影响：必须加~前缀（如@import (css) "~@/styles/reset.css"）或改用相对路径，否则解析失败 - 如果还在用
style-resources-loader，需升到 v1.4.1+，否则它传不进lessOptions结构，变量照样丢失
Vue CLI 项目里更稳妥的替代方案
如果 additionalData 配起来太绕，style-resources-loader 是 Vue CLI 生态中目前最稳的选择，但要注意：
- 必须同时装两个包：
style-resources-loader和vue-cli-plugin-style-resources-loader -
patterns必须是path.resolve()绝对路径，不能含@/或~/ - 文件里不能有
@import、.mixin()等非变量定义——loader 只注入顶层内容，嵌套在@media或选择器里的变量不会生效 - 改完变量文件后要手动刷新页面，HMR 不会触发重编译（这是当前限制，无法绕过）
最常被忽略的一点：所有路径操作都以 __dirname 为基准，不是 process.cwd()；monorepo 里更要确认 __dirname 指向的是当前包的配置目录，而不是根目录。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
