less与postcss配合时源映射丢失，根本原因是less-loader、postcss-loader、css-loader三者间source map传递被截断或覆盖：less-loader必须显式设sourcemap: true，postcss-loader需传from参数指定输入路径，css-loader也须开启sourcemap: true并设esmodule: false，mini-css-extract-plugin要配publicpath: ''，且源文件必须被开发服务器托管。
Less 和 PostCSS 插件链配合时，CSS 源映射丢失不是“没开 source map”，而是 less-loader、postcss-loader、css-loader 三者之间 source map 传递被截断或覆盖。只要中间任一环节没显式启用，浏览器看到的就只是最终 CSS 的行号，点不回 .less 或原始 CSS 文件。
less-loader 必须显式设 sourceMap: true
Less 4.0+ 默认关闭 source map，less-loader 也不继承 Webpack 的 devtool 配置。即使你写了 devtool: 'source-map'，对 CSS 完全无效。
-
less-loader的 options 里必须写死sourceMap: true，不能省略 - 若用
@import引入变量或 mixins，建议加sourceMapIncludePaths: true（Less CLI 对应--source-map-include-names），否则sources字段可能缩写成../vars.less，路径不可访问 - Vue CLI 用户额外注意：
vue.config.js中需补上css.loaderOptions.less.javascriptEnabled = true，否则@import解析失败会导致sources路径填错
postcss-loader 的 from 参数不能漏
postcss-loader 不像 less-loader 那样自动推导输入路径。如果没传 from，PostCSS 就不知道原始文件在哪，生成的 source map 里 sources 会是空数组或 undefined，VS Code 和 DevTools 全部失效。
- 必须在
postcss-loader的 options 里显式写from: path.resolve(__dirname, 'src/styles/main.less')（或对应实际入口路径） - 若用 Webpack 的
loaderContext.resourcePath动态传入更稳妥，例如：from: loaderContext.resourcePath - 插件如
postcss-nested或autoprefixer本身不负责 source map 生成，只依赖上游传来的from和map；传错或不传，它们就“瞎了”
css-loader 和 mini-css-extract-plugin 的 source map 链不能断
css-loader 默认会吃掉上游传来的 source map，再生成一个只反映自身处理（比如 url() 重写）的新 map。如果你没让它透传，Less → PostCSS 的映射就彻底丢弃了。
-
css-loader的 options 必须含sourceMap: true，且确保esModule: false（ESM 模式下 source map 支持不稳定） - 用了
mini-css-extract-plugin？它默认把sourceMappingURL写成绝对路径（如http://localhost:8080/css/app.css.map），但开发服务器跑在/myapp/下，浏览器按当前 CSS URL 解析相对路径就会 404 —— 必须加publicPath: '' - 检查最终生成的
.css.map文件：用curl http://localhost:8080/app.css.map看响应体，确认sources数组里的每个路径都能curl -I返回 200；常见坑是写成../src/variables.less，但开发服务器没托管/src/目录
最常被忽略的点：VS Code 或浏览器能跳转的前提，是 .less 文件本身得被开发服务器托管（比如 Webpack Dev Server 的 contentBase 或 Vite 的 server.fs.strict = false）。哪怕 map 文件完美，源文件 404，照样显示 “No source available”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
