必须按['style-loader', 'css-loader', 'less-loader']顺序配置，因Webpack use数组从右向左执行：less-loader先将Less编译为CSS，css-loader解析@import/url()并转为模块，style-loader再注入DOM；缺一或顺序错将导致路径解析失败、样式不生效或热更新失效。
less-loader 必须和 style-loader、css-loader 一起用
单独配 less-loader 不会生效，Webpack 遇到 .less 文件时，需要按顺序把 less 编译成 css，再把 css 转成 JS 模块，最后注入 DOM —— 这三步分别由 less-loader、css-loader、style-loader 完成。
常见错误是漏掉 css-loader，导致变量、@import 失效；或顺序写反（比如把 style-loader 放最后以外的位置），直接报错 Module not found: Error: Can't resolve 'xxx' in 'xxx'。
-
less-loader必须在css-loader之后、style-loader之前 - 三者缺一不可，且顺序固定：
['style-loader', 'css-loader', 'less-loader'] - 如果用了
MiniCssExtractPlugin（生产环境抽离 CSS），开发环境仍要用style-loader，否则热更新失效
devServer.hot 必须配合 HMR 插件才真正生效
只设 devServer: { hot: true } 不够。Webpack 5+ 默认启用模块热替换（HMR）机制，但 CSS 热更新依赖 style-loader 的 HMR 支持 —— 它内部已集成，无需额外插件，但前提是入口 JS 文件里显式引入了 .less 文件。
典型陷阱：LESS 文件没被 JS import，只靠 HTML link 引入，改完保存后页面完全不刷新，以为热更新坏了。
立即学习“前端免费学习笔记（深入）”；
- 确保在入口 JS（如
index.js）中写了import './styles/index.less' - 不要用
<link rel="stylesheet">加载 LESS 编译后的 CSS，这绕过了 Webpack 构建链，HMR 失效 - 如果用了
HtmlWebpackPlugin，它生成的 HTML 自动注入的是打包后的style标签，没问题；但手动写的 link 标签会被忽略
修改 less 文件后样式不更新？检查 webpack.config.js 的 rules 配置范围
很多项目把 test: /\.less$/ 写成 test: /\.less\?$/ 或漏了 $，导致匹配失败；或者 include/exclude 范围太窄，把实际存放 LESS 的目录排除在外。
最简验证方式：删掉所有 include 和 exclude，只留 test 和 use，看是否恢复热更新。确认后再逐步加限制。
-
test正则必须以$结尾，否则可能误匹配filename.less.map等文件 - 路径别名（如
@/styles）需确保resolve.alias已配置，否则 import 路径解析失败，loader 根本不触发 - Webpack 5 默认开启持久化缓存，改了 loader 配置后记得删掉
node_modules/.cache/webpack目录再试
热更新卡顿或延迟？注意 less-loader 的 sourceMap 和 modifyVars
less-loader 默认开启 sourceMap，开发时方便调试，但会拖慢编译速度；若项目 LESS 文件多、嵌套深，每次保存后等 2–3 秒才更新，大概率是这个原因。
另一个隐蔽点：用了 modifyVars 动态注入变量（比如主题色），但没配 javascriptEnabled: true，会导致 LESS 编译失败，热更新静默中断，控制台无报错。
- 开发阶段可临时关闭 sourceMap：
{ loader: 'less-loader', options: { sourceMap: false } } - 用
modifyVars时，务必加上javascriptEnabled: true，否则@{variable}语法不识别 - 避免在
less-loader中写复杂逻辑（如大量@import嵌套），优先拆成独立文件 + 显式 import
