必须开启 sourcemap 才能生成 /# sourceMappingURL=... / 注释，使浏览器可反查 .scss 行号；CLI 用 --sourcemap 或 --sourcemap=inline，Webpack 需 sass-loader 和 css-loader 同时启用 sourceMap: true，Vite 需同时配置 css.devSourcemap 和 sassOptions.sourceMap。
怎么让 Sass 编译输出带源码映射的 CSS？
必须开启 sourcemap，否则生成的 CSS 里压根没有 /*# sourceMappingURL=... */ 注释，浏览器开发者工具就无法反查到原始 .scss 行号。Sass CLI 默认关闭它，Node.js API 默认也关——不是忘了配，是它本来就关着。
实操建议：
- CLI 下用
sass --sourcemap=inline input.scss output.css（内联 map）或--sourcemap（生成独立.css.map文件） - Webpack +
sass-loader：确保sourceMap: true同时传给sass-loader和css-loader，漏一个都白搭 - Vite 用户注意：
css.devSourcemap配置只影响 CSS 处理链，但 Sass 编译本身还得靠sassOptions.sourceMap显式打开
为什么开了 sourcemap 还定位不到 .scss 文件？
常见现象是浏览器里点开样式，跳转到一个空的 data: URL 或报错 Failed to load resource。根本原因是 map 文件里记录的 sources 路径不对——比如写成了绝对路径 /Users/me/project/src/button.scss，而本地开发服务器根本没暴露这个路径。
解决关键在控制 sourceRoot 和 sources 的相对性：
- CLI 下加
--source-map-include-sources把源码直接塞进 map，跳过路径解析（适合小项目） - Webpack 中设置
sass-loader的implementation为dart-sass（别用 node-sass），并配sourceMap: true+sourceMapRoot: ''，强制用相对路径 - 检查生成的
.css.map文件，sources字段值应该是类似["button.scss", "../mixins/_reset.scss"]，而不是绝对路径或错误的嵌套路径
冗余样式真能靠 sourcemap 查出来？
不能。sourcemap 只负责“定位”，不负责“分析”。它告诉你某条 CSS 规则来自哪个 .scss 文件哪一行，但不会告诉你这条规则是否被覆盖、是否从未生效、是否和另一处重复。
真正要揪冗余，得配合其他手段：
- 浏览器里右键审查元素 → “Computed” 面板看哪些声明被划掉（
text-decoration: line-through），再点右侧来源链接跳回.scss - 用
purgecss扫未使用的类名，但它对动态拼接的 class（如class="btn btn--${type}"）基本失效 - Sass 编译时加
--style expanded输出未压缩 CSS，方便肉眼比对结构层级，避免嵌套过深导致意外覆盖
多入口 Sass 文件共用变量时 sourcemap 会乱吗？
会。比如 main.scss 和 admin.scss 都 @use "variables"，编译后两个 CSS 文件里的同一条 color: $primary，sourcemap 都指向 variables.scss 第 5 行——但你没法知道它实际来自哪个入口触发的编译流程。
这不是 bug，是设计如此。想区分上下文，只能：
- 避免跨入口复用同一份全局变量文件；改用
@use "theme" as theme-main/@use "theme" as theme-admin做命名隔离 - 在关键 mixin 或函数里加注释，比如
// [main] used in header layout，sourcemap 会保留这些注释行 - 接受这个限制：sourcemap 本质是“源文件 → 输出位置”的单向映射，不记录调用栈
最麻烦的其实是 build 工具链里多个 loader 串联时 sourcemap 的传递与合并——比如 sass-loader → postcss-loader → css-loader，中间任何一个没把 map 往下传，就断了。这种问题往往只在生产环境暴露，因为开发环境常默认开 map，而生产配置容易漏掉 sourceMap: true。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
