根本原因是 Sass 旧版 @import 直接拼接文件导致 Source Map 无法区分原始文件边界，应改用 @use 并确保构建工具启用 sourceMap、生成 .map 文件且 sourceMappingURL 注释正确。
为什么 @import 后的 CSS 行号总对不上
根本原因不是编译器坏了，而是 Sass 的 @import（尤其旧语法）会把被导入文件内容直接拼进主文件，但 Source Map 默认只记录最终输出的 CSS 行与原始 Sass 行的映射，不保留中间文件边界。一旦多个 _partial.scss 被顺序 @import，浏览器开发者工具看到的行号就变成“拼接后的大文件”里的位置，而非你实际编辑的那个文件的第几行。
实操建议：
- 立即停用旧版
@import，改用@use—— 它默认启用模块化作用域，且现代构建工具（如 vite、webpack + sass-loader@14+）能生成更准确的 Source Map - 检查是否在
sass命令行或构建配置中漏掉了--source-map或sourceMap: true选项；没有它，根本不会生成.map文件 - 确认构建产物目录下存在同名
.css.map文件，且 CSS 文件末尾有/*# sourceMappingURL=xxx.css.map */注释 —— 少一个字符（比如多空格、换行错位）都会让浏览器忽略映射
sass --no-source-map-urls 会让 Chrome 定位失效吗
会，而且很隐蔽。这个参数的作用是禁止在编译出的 CSS 末尾写入 sourceMappingURL= 注释，相当于主动切断浏览器加载 Source Map 的入口。即使 .map 文件物理存在，Chrome 也压根不知道该去哪找它。
常见错误场景：
立即学习“前端免费学习笔记（深入）”；
- vite.config.ts 中误配了
css.preprocessorOptions.sass.additionalData，顺手加了--no-source-map-urls - 用
dart-sassCLI 手动编译时，为了“减小 CSS 体积”加了这个 flag，却忘了开发阶段需要定位 - Webpack 的
sass-loader配置里写了sourceMap: true，但implementation指向的是node-sass（已废弃），而它的 Source Map 实现与 Dart Sass 不兼容，导致映射错乱
Vue 单文件组件里 <style lang="scss"></style> 的 Source Map 总跳转到 vue-style-loader 的 JS 行
这不是 Sass 的问题，是 webpack loader 链的映射传递断裂。Vue 的 vue-style-loader 会把 CSS 字符串注入 DOM，过程中若未正确传递前序 loader（css-loader → sass-loader）生成的 Source Map，浏览器就只能回退到 loader 自身的 JS 代码行。
关键修复点：
- 确保
sass-loader版本 ≥ 12.6.0，并设置sourceMap: true（注意：不是sourceMap: 'inline'，后者会把 map 写进 CSS，反而干扰 Vue 的注入逻辑） - 检查
css-loader是否启用了sourceMap: true—— 它必须和sass-loader保持一致，否则链路断在中间 - 避免在
vue.config.js或vite.config.ts中对css.preprocessorOptions.sass做过度精简，比如删掉additionalData里的@use规则，可能导致解析上下文丢失，间接影响行号映射精度
PostCSS 插件（如 autoprefixer）会污染 Sass Source Map 吗
会，但只在特定条件下。PostCSS 默认会尝试合并输入 CSS 的 Source Map，但如果某个插件（例如老旧版本的 postcss-preset-env）修改了 CSS AST 却没调用 result.root.source.input.map 更新映射，就会导致最终 CSS 行号偏移。
排查路径：
- 临时禁用所有 PostCSS 插件，只留
autoprefixer，看定位是否恢复准确 —— 如果恢复，说明其他插件有问题 - 升级
postcss到 8.4+ 和autoprefixer到 10.4+，它们对 Source Map 的处理更健壮 - 在 vite/webpack 配置中显式给 PostCSS 加
sourceMap: true，强制它参与映射链路，而不是依赖插件自行处理
真正麻烦的不是 Sass 本身，而是构建链路上任意一环对 Source Map 的“视而不见”或“半途丢弃”。只要有一处 loader 或插件没透传 map 对象，整条定位链就断在那儿了。
