Vite 5+ 原生支持 Less，只需安装 less（npm install -D less），无需 vite-plugin-less 或 less-loader；配置 additionalData 须用 path.resolve() 绝对路径，且需重启服务生效。
Less 插件不是必须装的，Vite 5+ 原生支持 Less 编译
Vite 自 5.0 起已内置 less 编译能力，只要安装了 less（npm install -D less），所有 都能直接解析。装 vite-plugin-less 或 less-loader 不仅无效，还可能引发 Unknown word 报错或样式重复注入。
常见错误是看到“插件”二字就下意识安装——但 Vite 的 Less 支持走的是原生 CSS 管道，不依赖 loader 链，也无需额外插件注册。
- 删掉
npm uninstall vite-plugin-less less-loader - 确保
node_modules/less存在（npm ls less可验证） -
vite.config.ts中不要写plugins: [lessPlugin()]类配置
加速 HMR 的关键是避免 Less 运行时开销
Less 热更新慢（常达 1.2s+）不是配置问题，而是它必须调用 Node.js 版解析器做 AST 构建、变量计算、嵌套展开——这无法并行，且绕过 Vite 的轻量 HMR 流水线。
真正有效的提速方式是减少 Less 的动态行为：
- 禁用
@extend和深层嵌套（如&__item &__text），改用扁平类名 +composes（配合 CSS Modules） - 把
@import "@{base}/mixins.less"这类含变量的路径，改成静态绝对路径（@import "${path.resolve(__dirname, 'src/styles/mixins.less')}";） - 移除
.when()、unit()等需javascriptEnabled: true的逻辑，否则每次修改都触发全量重编译
additionalData 注入必须用绝对路径，否则 HMR 静默失效
很多人配了 additionalData 却发现改 variables.less 没反应，是因为 Less 引擎根本不识别 @/styles/variables.less 这种别名——它只认文件系统真实路径。
正确写法：
<pre class="brush:php;toolbar:false;">import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
css: {
preprocessorOptions: {
less: {
additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.less')}";\n@import "${path.resolve(__dirname, 'src/styles/mixins.less')}";`,
javascriptEnabled: true // Less 6+ 默认 false，不开启则 @import 被忽略
}
}
}
})
- 必须用
path.resolve(__dirname, ...)，不能用process.cwd()或字符串拼接（Windows 下反斜杠会崩） - 每条
@import结尾必须有分号，漏掉会报ParseError - 改完
vite.config.ts后必须重启 dev server，热更新不感知配置变更
想真正快？换技术栈比调参数更有效
Less 的 HMR 慢是结构性问题：编译非原生、动态逻辑不可静态分析、无法并行执行。靠改 math: 'always' 或 sourceMap 只能缓解表象。
如果项目对开发体验敏感，优先考虑替代方案：
- 全局变量 → 改用 CSS 自定义属性：
:root { --primary-color: #409eff; }，var(--primary-color)浏览器原生支持，零编译延迟 - 原子化类名 → 接入
unocss，改 class 名即生效，HMR 响应压到 50ms 内 - 模块化样式 → 用
.module.css+css.lightningcss，Vite v6.3.2+ 已原生支持极速 HMR
保留 Less 的前提下，最易被忽略的是：variables.less 文件里写了实际样式规则（比如 .reset { margin: 0; }），会导致所有组件样式块都重复注入这段 CSS，不仅污染输出，还会让 HMR 变得更不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
