必须显式启用SourceMap，否则浏览器只能显示编译后的CSS行；Sass CLI 1.50+默认关闭，需加--source-map参数生成独立.map文件，Webpack需sass-loader、mini-css-extract-plugin及devtool三处协同，Vite需显式配置css.sourcemap:true，且浏览器和IDE须同步开启支持。
必须显式启用，否则浏览器里看到的永远是编译后的 CSS 行，不是你写的 SCSS。
命令行 sass 编译时加 --source-map 参数
从 Sass CLI 1.50+ 开始，默认不生成 .css.map 文件。不加参数，sass src/main.scss dist/main.css 只输出 CSS，连警告都没有。
-
--source-map：生成独立.css.map文件（推荐，开发调试用） -
--embed-source-map：把 map 内容 base64 编码后塞进 CSS 底部（体积大，仅限快速验证） -
--no-source-map：强制关闭（CI/生产构建常用） - ⚠️ 参数必须和输入输出路径写在一起：
sass --source-map src/main.scss dist/main.css，单独写sass --source-map main.scss会报错
Webpack + sass-loader 需要三处同时开启
只在 sass-loader 里设 sourceMap: true 不够——CSS 提取插件（如 mini-css-extract-plugin）也得配，否则最终输出的 CSS 文件里没有 sourceMappingURL 注释，浏览器根本读不到 map。
-
sass-loader的options.sourceMap设为true -
mini-css-extract-plugin的options.sourceMap也设为true - Webpack 自身的
devtool建议用eval-source-map或cheap-module-source-map（开发环境）
Vite 中 css.sourcemap 是开关，但默认值容易误判
Vite 的 css.sourcemap 默认在开发环境为 true，但某些场景下会被覆盖（比如环境变量或插件冲突），导致看似开了实则没生效。
立即学习“前端免费学习笔记（深入）”；
- 显式写死：
css: { sourcemap: true }在vite.config.js里 - 检查是否用了
lightningcss等替代处理器——它可能绕过 Sass 的 sourcemap 链路 - 深嵌套导入（如
@use '=/nested'）或虚拟模块导入，需确认自定义 importer 是否透传了 map 信息
浏览器和 IDE 要手动配合才生效
即使构建链路全通，Chrome DevTools 仍需手动开启 Source Maps 支持，WebStorm 的 File Watcher 也要改参数，否则生成的 .map 文件只是躺在磁盘上。
- Chrome：打开 DevTools → ⚙️ Settings → Preferences → Sources → 勾选
Enable CSS source maps - WebStorm File Watcher Arguments 示例：
--no-cache --source-map $FileName$: $FileParentDir$/css/$FileNameWithoutExtension$.css - HTML 中引入的必须是
.css文件（不是.scss），且该 CSS 文件末尾要有/*# sourceMappingURL=xxx.css.map */注释（CLI 和 loader 都会自动加）
最容易被忽略的是：Source map 不是单点配置，而是贯穿编译器、打包器、提取插件、浏览器设置的完整链路。任一环节断开，你就只能对着压缩后的 CSS 行猜哪一行 SCSS 出了问题。
