vite原生支持less，只需安装less包，无需less-loader；必须配置additionaldata或modifyvars才能复用全局变量和mixin，二者用途不同且不可混用。
不需要安装 less-loader，Vite 原生支持 Less，但“零配置”仅限基础编译；真正用起来必须配 additionalData 或 modifyVars，否则全局变量、mixin 无法复用。
为什么 less-loader 是冗余依赖
Vite 内部已集成 less 编译能力（基于 less v4+），只要项目里装了 less 包，<style lang="less"></style> 就能直接跑。装 less-loader 不仅没用，还可能触发重复解析或版本冲突（尤其在 Vite 5+ 中）。
-
npm install less --save-dev是唯一必需命令 - 若已装过
less-loader，建议npm uninstall less-loader并删掉相关配置 - 检查
node_modules/less是否存在，这是 Vite 调用的底层依赖
additionalData 自动注入全局文件的写法细节
想让每个 <style lang="less"></style> 都自动带入 @/styles/mixins.less？靠 additionalData，但路径和换行容易出错：
- 必须用反引号包裹字符串，且末尾加分号：
additionalData: `@import "@/styles/mixins.less";` - 不能用双引号或单引号，否则
@别名不被解析 - 如果导入多个文件，用换行拼接：
additionalData: `@import "@/styles/vars.less";\n@import "@/styles/mixins.less";` - 路径中
@依赖vite.config.js的resolve.alias配置，否则报File not found
全局变量注入用 modifyVars 还是 additionalData
二者用途不同，混用会覆盖：
-
modifyVars只接受扁平 key-value 对，适合覆盖第三方库（如 antd）的变量，例如：modifyVars: { '@primary-color': '#1890ff' } -
additionalData支持完整 Less 语法（@import、.mixin()、@media），适合项目内自定义逻辑 - 不要同时设两者来导入同一类内容，
modifyVars优先级更高，可能导致additionalData里的同名变量失效
常见报错与绕过方式
遇到编译失败时，先看错误是否来自 Less 语法本身，而非 Vite 配置：
-
Missing semicolon：不是 JS 报错，是 Less 解析器要求@import语句末尾必须有分号 -
ReferenceError: xxx is not defined：说明additionalData没生效，检查路径是否拼错，或是否漏了resolve.alias -
Inline JavaScript is not enabled：某些旧版 mixin 用了 JS 表达式（如unit(@x, px)），需显式开启：javascriptEnabled: true - 修改
vite.config.js后热更新不生效？必须重启 dev server，Vite 不监听配置文件变更
最易忽略的一点：Vite 的 Less 支持默认关闭 math 模式（即 1px + 2px 不自动计算），如需启用，得加 math: 'always' —— 但这会让所有括号内表达式都参与运算，可能意外改变原有样式逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
