必须在less-loader中显式启用sourceMap: true，且css-loader、postcss-loader也要开启sourceMap选项，配合devtool正确配置（开发用eval-cheap-module-source-map，生产用source-map），并确保sources路径为相对路径。
less-loader没开sourceMap: true，CSS层映射直接断链
Webpack 的 devtool 配置只管 JS 层的 Source Map，对 CSS 编译链完全不生效。Less 文件要能准确定位到原始行号，必须在 less-loader 里显式启用 sourceMap: true。漏掉这一步，浏览器看到的只是编译后的 CSS 行号，点进去永远是 .css 文件，根本见不到 .less。
-
less-loader的sourceMap: true是 CSS 层映射的起点，不是可选配置 - 若用了
MiniCssExtractPlugin（比如生产环境抽离 CSS），这步更是强制要求——它本身不生成 map，全靠less-loader输出 - 注意
implementation必须指向dart-sass或less（node-sass已弃用，且不支持现代 sourceMap 链）
css-loader 或 postcss-loader 漏配 sourceMap，中间链路吃掉原始行号
Less 编译出带 map 的 CSS 后，还要经过 css-loader 和（如果用了）postcss-loader。这两个 loader 默认会丢弃输入的 Source Map，除非你手动打开它们的 sourceMap 选项。
-
css-loader的options.sourceMap必须为true，否则它会把less-loader传来的 map “吞掉”，再吐一个只含 css → css 的残缺 map -
postcss-loader同理，只要链路上有它，就得配sourceMap: true - 顺序不能错：map 必须从
less-loader→css-loader→postcss-loader→style-loader或MiniCssExtractPlugin逐层透传
devtool 选错类型，CSS 映射被忽略或覆盖
Webpack 5 中，devtool 的值直接影响 CSS Source Map 是否被浏览器识别。用 eval 类（如 eval-cheap-module-source-map）时，CSS 映射能生效；但若用 source-map 却没配 MiniCssExtractPlugin，反而会导致行号漂移。
- 开发环境推荐
devtool: 'eval-cheap-module-source-map'+ 所有 loader 的sourceMap: true：快、准、不写磁盘 - 用了
MiniCssExtractPlugin就必须切到devtool: 'source-map'：因为该插件不支持 eval 类 map，只认独立 .map 文件 - 绝对别用
inline-source-map：它会把 Base64 编码的 map 塞进 CSS，体积暴增，且 Less 嵌套规则下映射极易错乱
sources 路径错位，浏览器找不到 .less 文件
即使所有 loader 都开了 sourceMap: true，浏览器 DevTools 里仍可能显示空白或跳转失败——问题出在 Source Map 的 sources 字段路径不对。
立即学习“前端免费学习笔记（深入）”；
- 检查
.css.map文件里的sources数组，值应为相对路径（如["button.less", "mixins/_reset.less"]），不能含/Users/xxx/或../outside-project/ - Webpack 中用
devtoolModuleFilenameTemplate: '[resource-path]'统一源码路径格式，避免绝对路径泄漏 - 若用 Webpack Dev Server，确保
devServer.static或static配置能让浏览器通过http://localhost:8080/src/button.less这类 URL 访问到原始文件
less-loader、css-loader、devtool、sources 路径四者中任意一环没对齐。最容易被忽略的是：以为开了 devtool: 'source-map' 就万事大吉，却忘了 css-loader 默认关着 sourceMap，默默把映射链掐断了。 
