vue 3 的 默认不共享变量，因编译上下文隔离；@import 必须置于变量引用前且路径正确；additionaldata 需以 @import 开头、路径别名需配置；style-resources-loader 不兼容 vite 且路径容错性差；less 变量与 css 自定义属性无关。
Vue 3 的 <style></style> 块默认不共享 Less 变量，不是语法写错了，而是编译上下文隔离导致的。 你写的 @primary-color 没报错但没生效，大概率是因为它根本没被编译器看到——每个 <style lang="less"></style> 是独立编译的，不会自动继承其他文件或全局定义的变量。
为什么 @import 写在组件里也不管用？
Less 的 @import 是编译时行为，但它只对当前文件生效，且必须出现在所有变量引用之前。常见错误是：
- 把
@import "./vars.less";放在样式规则后面（比如先写了.btn { color: @primary-color; }，再 import） - 路径写错或文件为空，
@import失败但构建工具没中断，后续变量就 undefined - 用了相对路径（如
@import "../styles/vars.less"），但组件所在目录层级不同，路径实际解析失败
additionalData 配置为什么有时不生效？
这是 Vue CLI 或 Vite 中注入全局变量最常用的方式，但容易卡在几个细节上：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
additionalData的字符串必须以@import开头，不能有空格或换行前置；例如`@import "@/styles/vars.less";`✅，而`\n@import "@/styles/vars.less";`❌（开头换行会导致 Less 解析失败） - 路径别名
@在 Vite 中默认可用，在 Vue CLI 中需确认vue.config.js里已配置configureWebpack.resolve.alias - 如果用了
scoped，变量仍可用（因为additionalData是预处理阶段注入，不影响作用域）；但若同时用了 CSS modules（module），变量就不可见了——modules 只认export，不认 Less 变量
用 style-resources-loader 的坑在哪？
这个 loader 能自动注入，但对 Vue 3 + Vite 或新版 Vue CLI 支持有限，主要风险点：
- 它依赖 Webpack，Vite 项目根本不能用（会直接报错
Cannot find module 'webpack'） - Vue CLI 5+ 默认禁用了
chainWebpack的旧写法，强行沿用旧配置可能导致rule.oneOf is not a function - patterns 数组里路径必须存在且非空，哪怕多一个空格或 BOM 字符，loader 就静默失败，变量照常 undefined
- 它不支持
additionalData那种动态拼接，所有注入内容都是静态字符串，没法做环境判断（比如开发/生产用不同主题）
真正关键的一点是：Less 变量和 CSS 自定义属性（--color）不是一回事。前者在构建时求值、无运行时开销；后者靠 JS 操作、可动态改。别指望 document.documentElement.style.setProperty('--primary', 'blue') 能影响 @primary-color 的值——它们压根不在同一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
