Vue3 + Vite 项目中配置 Less 全局变量最干净方式是在 vite.config.ts 中设置 css.preprocessorOptions.less.additionalData 字符串，末尾必须加分号；路径支持 @/ 别名（指向 src），变量文件仅含 @ 变量和 mixin 定义，不可含选择器或样式规则；修改后需重启开发服务器。
Vue3 + Vite 项目中配置 Less 全局变量
直接在 vite.config.ts 里配 css.preprocessorOptions.less.additionalData 是最干净的方式，不需要额外插件，也不用每个组件手动 @import。Vite 会在编译所有 Less 文件前自动注入变量定义。
关键点：
-
additionalData值必须是字符串，且末尾要带分号;，否则 Less 编译会报错（如ParseError: Missing semicolon） - 路径用
@/assets/styles/variables.less即可，@在 Vite 中默认指向src/ - 变量文件（如
variables.less）里只写@primary-color: #2563eb;这类定义，不要写实际样式规则，否则会被重复注入 - 修改配置后必须重启开发服务器，热更新不生效
Vue3 + Vue CLI 项目中配置 Less 全局变量
Vue CLI 不支持 additionalData，得靠 style-resources-loader 插件。它本质是在每个 Less 模块编译时，把指定文件内容前置拼进去。
常见问题和操作：
立即学习“前端免费学习笔记（深入）”；
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 先装两个包：
yarn add style-resources-loader vue-cli-plugin-style-resources-loader --dev（注意：仅装style-resources-loader不够，插件部分常被漏掉） -
vue.config.js中配置pluginOptions['style-resources-loader']，patterns用path.resolve(__dirname, './src/assets/vars.less')绝对路径 - 如果组件里仍报
variable is undefined，检查vars.less是否真在该路径，且文件名大小写是否匹配（Linux 环境区分大小写） - 不推荐在
main.ts中import './assets/vars.less'—— 这只会把变量当普通 CSS 加载，无法被 Less 编译器识别为变量作用域
Less 变量与 CSS 变量混用的边界
Less 变量（@primary）是构建时解析的，CSS 变量（--primary）是运行时生效的。两者不能直接互换，但可以桥接。
比如想让 Less 主题色响应用户切换：
- 在
variables.less中定义：@theme-bg: #fff;，然后用它写基础样式 - 同时在
:root或[data-theme="dark"]里定义对应 CSS 变量：--theme-bg: #1e1e1e; - 组件内优先用
var(--theme-bg)实现动态切换；只有确定不会变的、纯构建期逻辑（如生成固定尺寸的 mixin）才用@theme-bg - 别试图在 Less 里写
@theme-bg: var(--theme-bg);—— Less 编译器不认识var()，会直接报错
为什么全局变量在 scoped style 中有时不生效
scoped 样式下，Less 变量本身不受影响，但如果你在变量文件里写了带选择器的样式（比如 .btn { color: @primary; }），这些样式会被重复注入到每个组件的 scoped CSS 中，造成权重混乱或覆盖失效。
务必遵守这个约束：
-
variables.less文件里只允许出现：@xxx、.mixin-name() { ... }、// 注释 - 禁止出现任何选择器、属性声明、
@import（除非导入另一个纯变量文件） - 如果要用 mixin，确保它只封装逻辑（如
.border-radius(@r) { border-radius: @r; }），不带具体值 - scoped 标签内使用变量完全正常，例如：
<style lang="less" scoped>.header { background: @primary-color; }</style>
最容易被忽略的是 additionalData 分号和变量文件的“纯度”——少一个 ; 或多一行 .reset { margin: 0; }，都可能导致整个 Less 链路静默失败，错误提示还不明显。
