Vite 本身不支持“按需加载 Less 库”，css.preprocessorOptions 仅在编译前注入代码，非模块加载器；所谓“高效按需”实为通过 additionalData 注入全局变量/mixin，并由组件显式 @import 控制引入范围。
直接说结论：Vite 本身不支持“按需加载 Less 库”，css.preprocessorOptions 只负责编译前注入代码，不是模块加载器；所谓“高效按需”，本质是靠 additionalData 注入全局变量/mixin + 组件内显式 @import 或 @use（Less 不支持 @use）来控制引入范围，避免全量打包。
为什么不能像 JS 那样“按需加载”Less 文件
Less 是编译时预处理器，不是运行时模块系统。Vite 的 css.preprocessorOptions 仅影响每个 .less 文件的编译上下文，不会改变文件是否被解析或打包。即使你把整个 Ant Design Less 源码放进去，只要组件里没 @import 它，就不会参与编译 —— 但这也意味着你无法通过配置让 Vite “自动识别并只编译用到的 mixin”。
- 所有
@import路径在编译阶段就被展开，最终输出的是一个扁平的 CSS 字符串 -
additionalData是“每个 .less 文件开头都加一段”，它不触发任何文件读取，只是字符串拼接 - 如果你误把整套
ant-design-vue的style/index.less丢进additionalData，会导致每个组件样式都包含全部重置、动画、组件规则，体积爆炸
正确用法：用 additionalData 注入基础变量和 mixin，按需 @import 组件级样式
这是真正可控、可维护的“按需”路径。核心是分层：全局只暴露变量和工具函数，具体组件样式由开发者主动引入。
-
additionalData里只放@import "@/styles/variables.less"; @import "@/styles/mixins.less";，且确保这两个文件不含任何顶层选择器（如.btn {}） - 变量文件用
@primary-color: #1890ff;形式定义，mixin 文件用.ellipsis() { overflow: hidden; text-overflow: ellipsis; } - 组件内需要某个 UI 库的样式时，显式
@import "~ant-design-vue/lib/button/style/index.less";（注意~表示 node_modules） - 路径中的
@/别名在additionalData字符串中不生效，必须用path.resolve(__dirname, 'src/styles/variables.less')或写死相对路径（如../src/styles/variables.less）
modifyVars 和 javascriptEnabled 的实际作用与风险
这两个选项来自 Less 编译器原生 API，不是 Vite 特有，但容易被误解为“能帮你按需”。
立即学习“前端免费学习笔记（深入）”；
-
modifyVars仅替换顶层变量（如{ 'primary-color': '#1890ff' }），对嵌套变量、mixin 内部变量无效；它不能替代@import，也不能删减已引入的样式 -
javascriptEnabled: true允许在 Less 中使用@import动态路径或color(...)等 JS 函数，但会关闭 Less 的静态分析，导致 HMR 失效、source map 错乱，生产环境应禁用 -
math: "always"可让width: 40/20px直接计算，但若变量含单位（如@gap: 8px），@gap * 2仍需javascriptEnabled支持，否则报错
容易被忽略的路径与别名陷阱
additionalData 是纯字符串，Vite 不做任何路径解析。哪怕你在 vite.config.ts 里配了 resolve.alias: { '@': path.resolve(__dirname, 'src') }，@/styles/vars.less 在 additionalData 里依然会被当作字面量路径处理，大概率报 Cannot find module。
- 安全写法是用
fs.readFileSync(path.resolve(__dirname, '../src/styles/variables.less'), 'utf-8')读取内容后拼进字符串，或直接写../src/styles/variables.less - 如果项目用了 pnpm，
~别名指向node_modules是可靠的，但@import "~xxx/lib/xxx/index.less"前要确认该库确实导出了 Less 源码（很多 UI 库只提供编译后 CSS） - Less 的
@import不支持条件判断（如if (@debug) { @import "debug.less"; }），想实现类似逻辑只能靠构建脚本预生成不同入口文件
