只需安装less，无需less-loader；在vite.config.ts中配置additionaldata可自动注入全局变量和mixin，路径须正确、末尾加分号，且需重启服务生效。
直接在 vite.config.ts 里配 additionalData 就行，不需要 less-loader，也不用在每个组件里手动 @import。
为什么不能只装 less-loader？
Vite 原生处理 Less，less-loader 是 Webpack 的产物，在 Vite 中不仅无效，还可能引发编译冲突或报错 Unknown word。实际只需要：
-
npm install -D less（必须） -
less-loader完全不用装（常见错误）
additionalData 配置要点
它会在每个 .less 文件编译前自动注入代码，是实现全局变量的核心。关键细节：
- 路径必须可解析：推荐用
@/assets/styles/variables.less（前提是已配resolve.alias），或写绝对路径如./src/assets/styles/variables.less - 末尾必须加分号：
@import "@/assets/styles/variables.less";（漏掉分号会报ParseError） - 只放变量和
mixins，不要写实际样式规则（比如.btn { ... }），否则所有组件都会重复注入这些样式 -
javascriptEnabled: true不是必需项，Vite 默认开启；仅当你用到了~或动态 JS 表达式时才需显式设置
变量文件怎么写才安全？
variables.less 应该纯粹是声明，不带副作用：
@primary-color: #409eff;
@border-radius: 8px;
@font-size-base: 14px;
// ✅ 正确：只定义
// ❌ 错误：下面这行会导致样式重复注入
// .global-reset { margin: 0; }
如果你还想复用 mixins，也统一放在这里，比如：
.flex-center() {
display: flex;
justify-content: center;
align-items: center;
}
Vue 组件中直接用，但要注意 scoped 限制
配置生效后，以下写法都能访问到 @primary-color：
-
<style lang="less"></style>（非 scoped，全局作用域） -
<style lang="less" scoped></style>（scoped 下变量仍可用，因为additionalData注入的是预编译阶段） -
<style lang="less">@import "@/xxx.less";</style>（冗余，不建议）
但注意：scoped 不影响变量解析，只影响生成的 CSS 类名；如果变量用于生成 CSS 自定义属性（:root { --c: @primary-color; }），那要确保它写在非 scoped 样式块里，否则不会挂载到根节点。
最容易被忽略的一点：改完 vite.config.ts 后必须重启开发服务器，热更新不感知配置变更。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
