additionaldata 是 vite 原生支持、零运行时开销的全局 less 注入方案，通过绝对路径或别名导入变量/mixins 文件，需注意路径解析、导入顺序及 hmr 限制。
为什么 additionalData 是首选方式
因为它是 Vite 原生支持、零运行时开销、无需额外插件的注入方案。Less 编译阶段直接把全局文件内容拼到每个 .less 文件头部，变量、mixin、函数都能直接用，不依赖 modifyVars 的 hack 模式，也不需要在每个组件里手动 @import。
additionalData 的路径写法必须用绝对路径或别名
相对路径（如 "@import './src/assets/variables.less'"）在某些构建场景下会失效，尤其是当被 import 的组件不在 src 根目录时。Vite 不会对 additionalData 中的路径做 resolve 处理，它只是字符串拼接。
- ✅ 推荐：用
path.resolve(__dirname, 'src/assets/variables.less')生成绝对路径 - ✅ 或配合 alias 使用：先在
vite.config.ts中配置alias: { '@': path.resolve(__dirname, 'src') }，再写@import "@/assets/variables.less" - ❌ 避免：
@import "./variables.less"或@import "src/assets/variables.less"—— 极大概率报File not found
多个全局文件怎么导入
additionalData 接收字符串，所以可以拼多行 @import，顺序很重要：变量定义必须在使用前导入。
例如：
additionalData: `@import "${path.resolve(__dirname, 'src/assets/variables.less')}";\n@import "${path.resolve(__dirname, 'src/assets/mixins.less')}";`
- 变量文件（
variables.less）放最前，确保所有后续文件能读取@color-primary等 - mixins、functions 类文件紧随其后
- 不要在
additionalData里写实际样式规则（比如.btn { ... }），否则会在每个 .less 文件开头重复注入，造成样式冗余甚至冲突
常见报错和绕过点
遇到 ReferenceError: path is not defined 或 Cannot find module 'path'，不是少装了 less，而是 Node 类型声明缺失：
- 运行
yarn add -D @types/node或npm install -D @types/node - 确保
vite.config.ts开头有import * as path from 'path'（注意不是import path from 'path'，ESM 下需显式解构或用import path from 'node:path'） - 如果用 JS 配置（
vite.config.js），可直接const path = require('path')，无需类型包 -
javascriptEnabled: true不是必须项，仅当你用了~别名或动态表达式时才需要；纯@import场景可省略
真正容易被忽略的是：additionalData 只对 .less 文件生效，不会影响 .css 或 .scss；且它不触发 HMR 自动刷新全局文件变更——改了 variables.less 后需手动保存任意一个 .less 组件才能触发重编译。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
