SCSS Source Map行号偏差主因是@import拼接、PostCSS重写或loader链未透传sourceMap；需在sass-loader、css-loader、postcss-loader中均启用sourceMap，并校验map文件、sources路径及HTTP响应。
SCSS生成的Source Map行号偏差，90%不是编译器出错，而是@import拼接、PostCSS重写或loader链未透传sourceMap导致的映射断层。
为什么点CSS规则跳到.scss里差几行甚至空白处
SCSS的@import是文本级拼接，不是模块隔离。比如_reset.scss有12行，_button.scss有8行，主文件index.scss先@import "reset"再@import "button"，那么_button.scss第3行在最终CSS里实际对应第15行（12+3），但若sourceMap没记录导入顺序或loader中途丢弃了原始位置信息，浏览器就按“单文件”算行号，直接偏移。
- DevTools显示的行号始终基于最终CSS输出流，而非每个SCSS文件独立计数
- 如果用了
postcss-loader（如autoprefixer、cssnano），它默认不透传sourceMap，会把SCSS → CSS这层映射“吃掉”，只留下PostCSS → 最终CSS的映射 - Dart Sass 1.50+默认关闭sourceMap，
sass src/index.scss dist/index.css根本不会生成sources字段，更别说行号对齐
Webpack中sass-loader + css-loader链必须三处同时开sourceMap
Webpack的devtool对CSS完全无效，它只管JS层。SCSS源码映射必须靠loader链显式打通：
-
sass-loader配置里必须写sourceMap: true（默认false） -
css-loader的options也得设sourceMap: true，否则它会丢弃sass-loader生成的map，再吐一个仅含自身转换的新map - 若用了
postcss-loader，它的options同样要加sourceMap: true，否则PostCSS处理后行号重排无迹可循 - 用
mini-css-extract-plugin时，必须显式设publicPath: ''，否则sourceMappingURL被写成http://localhost:8080/css/index.css.map，而服务实际跑在/myapp/下，浏览器解析相对路径直接404
CLI编译时行号错位的修复关键参数
命令行用Dart Sass时，参数顺序和开关缺一不可：
立即学习“前端免费学习笔记（深入）”；
- 必须把
--source-map放在输入输出路径之前：sass --source-map src/index.scss dist/index.css✅；sass src/index.scss dist/index.css --source-map❌（旧版可能忽略） - 加
--source-map-include-names避免sources字段缩写成mixins.scss，确保路径完整可访问 - 若项目部署在子路径（如
/static/），用--source-map-rootpath=/static/让sources变成["/static/src/_reset.scss"]，再配Nginx透传该路径 - 本地快速验证可用
--embed-source-map，map内联进CSS末尾，绕过路径问题，但别上生产
验证Source Map是否真生效的三个硬检查点
别信配置写了就对，手动确认才是关键：
- 用
tail -n 1 dist/index.css确认最后一行是/*# sourceMappingURL=index.css.map */，且后面无空行、无其他字符 - 浏览器直接打开
http://localhost:3000/css/index.css.map，响应必须是合法JSON，sources字段非空（如["src/index.scss", "src/_reset.scss"]），mappings字段非空字符串 - 对
sources里每个路径，执行curl -I http://localhost:3000/src/index.scss，必须返回200；出现404不是文件没生成，是开发服务器没托管该路径
最易被忽略的是sources里的路径协议：Webpack默认生成webpack:///./src/index.scss，Chrome能识别，但VS Code或某些CI环境可能无法定位，此时需配devtoolModuleFilenameTemplate: '[absolute-resource-path]'替换掉webpack://前缀。
