能直接在浏览器点进.scss或.less文件报错行需CSS Source Map链路完整：每层编译工具配置对齐、路径不越界、缓存不干扰；Chrome DevTools中Sources面板可见源文件且“Open in Editor”可跳转，网络面板确认app.css.map返回200且为合法JSON，各loader（less-loader、sass-loader、postcss-loader）及构建工具（Vite/Webpack）均正确开启sourceMap，路径解析与HTTP响应头（如Cache-Control: no-cache）无误。
能直接在浏览器里点进 .scss 或 .less 文件报错行，前提是 CSS Source Map 链路完整且未被覆盖——不是开了就自动生效，而是每层编译工具都得对齐配置、路径不越界、缓存不干扰。
Chrome DevTools 点不了 Styles 面板里的 .scss 文件链接？先查 source map 是否真加载
点不动 header.scss:42 这类链接，90% 是映射根本没建立。Vite 默认开，但加了 css.preprocessorOptions.sass 就可能关掉；Webpack 必须显式设 devtool: 'source-map' 或 'eval-source-map'，且仅开发环境有效。
- 打开 DevTools → Sources 面板 → 展开
localhost或webpack://→ 找得到src/components/Button.scss才算成功 - 右键任意 CSS 规则旁的文件名 → “Open in Editor” 能跳转本地文件，说明 Workspaces 已关联且 source map 可用
- 若只看到
app.css没有源文件，检查网络面板：app.css.map请求是否返回 200，响应体是不是合法 JSON
Less/Sass 编译后报错行号偏移或跳到错文件？检查 loader 与 preprocessor 的 sourceMap 开关链
Webpack 中 less-loader 和 css-loader 都要开 sourceMap: true；Sass CLI 必须显式加 --sourcemap（Dart Sass）或 --source-map（Node Sass，已弃用）；Vue CLI 还得透传 javascriptEnabled: true，否则 @import 解析失败会断链。
-
sass-loader的sassOptions.sourceMap必须为true，且别配devtool: 'cheap-module-source-map'——它丢原始列信息，导致跳转不准 - 混用 PostCSS（如
autoprefixer）时，postcss-loader也得开sourceMap: true，否则行号被改写却不更新映射 - 用了
@use规则时，.map 会把依赖模块“扁平化”，跳转位置可能是被引入的_mixins.scss，而非你正在编辑的主文件
明明有 .map 文件，DevTools 却显示 “Sources not found”？路径解析错了
.map 文件里 sources 字段存的是相对路径，浏览器按当前 CSS URL 解析。比如 CSS 在 /dist/css/app.css，而 sources 写着 ["../src/App.scss"]，就会去请求 /dist/src/App.scss——404。
- Webpack 中设
output.devtoolModuleFilenameTemplate: "[absolute-resource-path]"，避免默认webpack://协议被拦截 - Less CLI 编译加
--source-map-rootpath=/src/，让sources变成["/src/App.less"]，再配好静态服务托管/src/ - 本地开发建议关服务器缓存：
Cache-Control: no-cache响应头，否则旧 CSS 带着旧sourceMappingURL注释，会拉错 .map
线上环境看不到源码链接？别指望生产环境开 source map
线上页面的 Styles 面板里看不到 Button.module.scss 链接，不是配置漏了，是构建脚本压根没生成 .map，或 CDN/反向代理屏蔽了 .map 后缀请求。生产环境通常禁用 source map 是安全与体积考量，不是调试手段失效。
真正容易被忽略的点：source map 生效依赖整条链路——从编译器参数、loader 配置、构建工具 devtool 选项，到 HTTP 响应头、浏览器设置、甚至编辑器本地路径映射——任一环节断开，都会退回到 app.css:123 这种不可读的位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
