less热更新需构建工具精确配合：webpack须满足hot:true、loader顺序为['style-loader','css-loader','less-loader']且禁用minicssextractplugin；vite默认支持但需正确配置additionaldata和resolve.alias。
Less CSS 热更新不是“开了就能用”的功能，它依赖构建工具链的精确配合。Webpack 和 Vite 的实现路径完全不同，配错一个 loader 顺序或插件开关，就会退化成整页刷新。
Webpack 中 Less 热更新必须满足三个硬性条件
缺一不可，且顺序/环境不能错位：
-
devServer.hot: true必须显式开启（Webpack 5+ 不再默认启用） -
module.rules中.less文件的处理链必须是['style-loader', 'css-loader', 'less-loader']—— 注意是从右向左执行，less-loader最先处理，style-loader最后注入 DOM - 开发环境绝对不能引入
MiniCssExtractPlugin，它会把样式抽成独立文件，直接切断 HMR 能力
常见错误：在 rules 里误写成 ['less-loader', 'css-loader', 'style-loader']，会导致 Webpack 报 Module not found；或者开发配置里漏掉 hot: true，只靠 CLI 参数 --hot 有时会被忽略。
Vite 5+ 下 Less 热更新默认生效，但全局变量不自动注入
Vite 内置 Less 编译器（基于 less v4+），不需要装 less-loader —— 装了反而冲突。热更新本身开箱即用，但以下两点常被忽略：
-
additionalData必须用反引号包裹，且每条@import后加分号：additionalData: `@import "@/styles/vars.less";`；单引号或双引号会导致@别名无法解析 -
resolve.alias必须提前配好，否则@/styles这类路径根本找不到文件，整个 Less 编译中断，热更新静默失败
改完 vite.config.js 后必须手动重启 dev server，Vite 不监听自身配置文件变更。
为什么改了 Less 样式，页面却没变化？先查这三处
不是热更新坏了，而是某个环节断开了：
- 入口 JS 文件里没
import对应的.less文件 —— 用<link rel="stylesheet">引入的样式完全绕过 Webpack/Vite 构建链，HMR 失效 -
test: /\.less$/正则漏了$，导致匹配到index.less.map等文件，loader 实际没运行 - Webpack 5 持久化缓存未清除：改过 loader 配置后，删掉
node_modules/.cache/webpack目录再试
最简验证法：临时删掉所有 include/exclude，只留 test 和 use，看是否恢复更新。确认后再逐步加限制。
Less 变量无法按环境切换？别在文件里写 if
Less 是编译时语言，@import (when (@env = 'dev')) 这类语法非法，直接报错。真正可行的方式只有两种：
- Webpack：
less-loader的modifyVars选项传入对象，值由process.env.NODE_ENV动态决定 - Vite：
lessOptions.modifyVars，但注意.env文件里的VITE_*变量不会自动透传到 Node.js 进程，得靠插件或启动脚本注入
变量名含连字符（如 @bg-color）传参时必须转为下划线（bg_color），否则解析失败 —— 这个细节几乎没人记得查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
