vite 5+ 内置 less 编译器，无需安装 less-loader；全局变量和 mixin 需通过 additionaldata（反引号包裹、@import 后加分号、路径依赖 alias）注入；热更新失效多因未重启服务、additionaldata 文件语法错误或 missing alias。
不需要装 less-loader，装 less 就够了；热更新默认生效，但全局变量和 mixin 不会自动注入，必须配 additionalData 或 modifyVars 才能复用。
为什么不能装 less-loader
Vite 5+ 内部已集成 less 编译器（基于 less v4+），只要 node_modules/less 存在，<style lang="less"></style> 就能直接解析。装 less-loader 属于冗余依赖，可能引发：
- 重复解析：Vite 和
less-loader同时处理同一文件，导致编译失败或样式错乱 - 版本冲突：尤其当
less-loader锁定旧版less（如 v3），而 Vite 调用的是 v4+ 时 - 配置失效：Vite 的
preprocessorOptions.less会被less-loader绕过，additionalData不生效
执行 npm uninstall less-loader 并删掉 vite.config.js 中任何 less-loader 相关引用即可。
additionalData 怎么写才有效
这是让每个 <style lang="less"></style> 自动载入全局 mixin/变量的唯一可靠方式，但路径和语法极易出错：
- 必须用反引号包裹字符串，且每条
@import末尾带分号：additionalData: `@import "@/styles/mixins.less";` - 双引号或单引号会导致
@别名不解析，报错File not found - 多个导入用
\n拼接：additionalData: `@import "@/styles/vars.less";\n@import "@/styles/mixins.less";` - 路径中的
@依赖vite.config.js中resolve.alias配置，没配 alias 就得写相对路径（如./src/styles/...）
热更新不生效？先检查这三件事
Less 文件修改后样式没更新，不是 Vite 热更新坏了，而是以下某个环节断了：
- 改完
vite.config.js后没重启 dev server —— Vite 不监听配置文件变更，必须手动Ctrl+C再npm run dev -
additionalData导入的文件里有语法错误（比如少分号、括号不匹配），整个 Less 编译会中断，热更新卡住 - 用了旧版 mixin 写法（如
unit(@x, px)），需显式开启：javascriptEnabled: true，否则报Inline JavaScript is not enabled
要不要开 math: 'always'
默认情况下，Less 不计算数学表达式（1px + 2px 原样输出），只做字符串拼接。如果项目里大量依赖括号内计算，才加这一项：
- 加了
math: 'always'后，所有括号内容都会被当作表达式求值，包括你本意是分组的写法（如font-size: (@base * 1.2);） - 它不兼容某些第三方库的 Less 变量逻辑（比如 antd v4 的部分 theme 变量），慎用
- 更安全的做法是局部启用：
calc(1px + 2px)或用~"1px + 2px"避免全局 math 模式
真正容易被忽略的，是 additionalData 里漏掉的分号和 alias 配置缺失 —— 这两个问题占了 80% 的“Less 不生效”报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
