Dart Sass默认关闭sourcemap，仅配Webpack的devtool无效；必须显式开启SCSS层映射：CLI加--source-map参数，Webpack中sass-loader设sourceMap:true且用dart-sass，Vite需同时设css.devSourcemap和sass.sourceMap为true。
SCSS → CSS 这一步的 sourcemap 没开
不是“开了 devtool 就行”，Dart Sass 默认关闭 sourcemap，Webpack 的 devtool 选项对 CSS 层完全无效。只配 devtool: 'source-map'，sass-loader 仍不会生成 .map 文件。
必须显式开启 SCSS 编译层映射：
- CLI：用
sass --source-map=inline input.scss output.css（注意--source-map参数必须放在输入/输出路径之前） - Webpack：
sass-loader的options中加sourceMap: true，且确保用的是sass（dart-sass），不是已弃用的node-sass - Vite：仅设
css.devSourcemap: true不够，还得补css.preprocessorOptions.sass.sourceMap: true
sourceMap 链在中间环节被吃掉了
SCSS 编译只是链的起点，后续还有 PostCSS（如 autoprefixer）、CSS 提取（mini-css-extract-plugin）、甚至压缩等步骤。任一环节没透传 sourceMap，映射就断在那了。
常见断裂点：
-
postcss-loader没配sourceMap: true，autoprefixer 处理后原始映射丢失 -
css-loader忘了开sourceMap: true，它会把上一步的 map “吞掉”再吐出一个空壳 -
mini-css-extract-plugin默认把sourceMappingURL写成绝对路径（如http://localhost:3000/css/app.css.map），但开发服务器实际托管在子路径下（如/myapp/），导致 404 —— 解决办法是显式设publicPath: ''
sources 字段路径不合法，浏览器根本没法加载
就算 .map 文件生成了，如果里面 sources 字段写的是 "/Users/me/project/src/button.scss" 或 "../../src/button.scss"，浏览器 DevTools 就无法解析定位。
关键检查项：
- 打开浏览器直接访问
http://localhost:3000/css/app.css.map，确认返回 JSON 且sources是相对路径，例如["button.scss", "mixins/_reset.scss"] - Webpack 中可加
sourceMapRoot: ''强制使用相对路径根 - CLI 下用
--embed-source-map或--source-map-include-sources把源码内容直接塞进 .map，绕过路径解析（适合快速验证）
DevTools 没加载或没启用映射功能
即使所有配置都对，Chrome 也可能因设置问题不加载 .scss 文件：
- 确认 DevTools 的 Settings → Preferences → Sources → Enable JavaScript source maps 和 Enable CSS source maps 都已勾选
- 检查 Network 面板中 .css 文件响应头是否含
Content-Type: text/css，且末尾有且仅有一行/*# sourceMappingURL=app.css.map */（后面不能有空行或其他字符） - 右键样式 → “Reveal in Sources” 失败？先看 Sources 面板左侧是否有
webpack://或file://节点下展开出你的 .scss 文件名；没有就说明映射压根没进 DevTools
真正容易被忽略的是：sourcemap 只负责“跳转”，不负责“判断逻辑”。它告诉你某条 CSS 规则来自哪一行 SCSS，但不会告诉你这一行是否被覆盖、是否和另一处重复、是否因嵌套层级意外失效——这些得靠 Computed 面板里的 strikethrough 和手动比对结构来揪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
