Less编译后无法跳转到.less源文件，根本原因是source map路径未对齐或未被识别：需在less-loader中显式配置sourceMap: true，确保css-loader也开启sourceMap，并验证sourceMappingURL路径可解析、.less文件被开发服务器托管且VSCode工作区路径匹配。
Less 编译后无法跳转到 .less 源文件？不是配置没开，而是 source map 路径没对上或未被浏览器识别。
less-loader 中 sourceMap 配置必须显式开启
Webpack 项目里，less-loader 默认不生成 source map，即使你全局设了 devtool: 'source-map'，它也只管 JS。必须在 less-loader 的 options 里单独打开：
-
sourceMap: true是必需项，否则不会输出.css.map文件 - 建议同时配
sourceMapFileInline: false（默认值），确保生成独立.css.map文件而非内联 base64 —— 浏览器调试更稳定，VSCode 也能识别 - 如果用的是 Webpack 5+，还要确认
css-loader没禁用sourceMap：它的options.sourceMap也得是true
编译产物中 sourceMappingURL 注释必须可解析
浏览器靠 CSS 文件末尾的 /*# sourceMappingURL=xxx.css.map */ 找映射文件。常见失效原因：
-
sourceMappingURL路径是相对路径，但 CSS 被部署到子目录（如/static/css/app.css），而.map在/css/app.css.map—— 浏览器按 CSS 当前 URL 解析，404 - Webpack 的
output.publicPath没配对，导致生成的注释路径错位（比如写成http://localhost:8080/css/app.css.map，但实际服务跑在/myapp/下） - 用了
mini-css-extract-plugin？它默认把sourceMappingURL设为绝对路径，需手动覆盖：filename: '[name].css', chunkFilename: '[name].css'+options: { publicPath: '' }
浏览器和编辑器要能读到 .map 和原始 .less 文件
Source Map 不只是“有文件”，还要“能访问”：
立即学习“前端免费学习笔记（深入）”；
- 开发时，确保 Webpack Dev Server 或本地静态服务把
.less文件也托管出去（默认不托管源码），否则 Chrome DevTools 显示 “Sources not found” - VSCode 调试 CSS 时，断点打在 CSS 行上却跳不到 .less？检查
sources字段里的路径是否真实存在 —— Less 编译器填的是相对路径或 webpack:/// 协议路径，VSCode 需要能在工作区里按该路径定位到文件 - 如果你用
@import './mixins.less'，而mixins.less在src/styles/，那编译后的sources里可能是webpack:///./src/styles/mixins.less，VSCode 必须打开的是包含src/的根目录
Vue / React 项目里 Less 的特殊坑
框架项目常套多层 loader，容易漏掉某一级的 source map 传递：
- Vue CLI 项目：
vue.config.js里仅设css.sourceMap: true不够，还得在configureWebpack中给less-loader单独加sourceMap: true - React + Craco：craco-less 插件默认关闭 source map，需在
craco.config.js中显式传入lessOptions: { sourceMap: true } - 所有框架下，如果 Less 文件里用了
@import (reference)，那个被 reference 的文件不会出现在sources数组里 —— 它没产出 CSS，自然不参与映射，调试时看不到，这是正常行为
真正卡住人的往往不是“怎么开”，而是 sources 里写的路径 VS 实际文件位置 VS 开发服务器路由三者没对齐。每次改完配置，务必打开浏览器开发者工具的 Network 面板，过滤 .map，看是不是 200；再点开 Sources，展开 localhost 树，确认 .less 文件是否真列在那儿 —— 这比反复重装依赖有用得多。
