SCSS编译未生成有效source map的根本原因是生成的.map文件内容为空或无效，需显式启用--source-map参数、Webpack中两级配置sourceMap、Live Sass Compiler插件正确设置路径及浏览器开启CSS/JS source maps。
SCSS编译没生成有效 source map 的常见原因
根本问题不是“没生成文件”，而是生成的 style.css.map 内容为空或无效，比如 {"version":3,"sourceroot":"","sources":[],"names":[],"mappings":"","file":"style.css"}。这说明编译器识别了 source map 选项，但没真正建立源文件与输出的映射关系。
sass CLI 默认不启用 source map，必须显式加参数
全局安装的 sass（Dart Sass）默认关闭 source map，即使你看到 .map 文件被创建，那也只是空壳。必须手动加 --source-map 参数：
-
sass source/style.scss css/style.css --source-map：生成同名.css.map -
sass source/style.scss css/style.css --source-map=css/style.css.map：指定 map 路径 - 加
--embed-sources可把 SCSS 内容直接嵌入 map 文件（调试更稳，但 map 体积变大）
Webpack 中 sass-loader 的 source map 需要两级开启
仅在 sass-loader 配置里写 sourceMap: true 不够，因为 source map 链路是：SCSS → CSS → JS → 浏览器。CSS 层的 source map 必须被上层 loader 和 webpack 自身共同支持：
- 确保
webpack.config.js的devtool设置为'source-map'或'cheap-module-source-map'（不能是'eval'类） -
sass-loader配置中必须显式启用：{ loader: 'sass-loader', options: { sourceMap: true } } - 如果用了
css-loader，它的sourceMap选项也得设为true - 注意：生产环境（
mode: 'production'）下 webpack 默认禁用 source map，需额外配置devtool
VS Code Live Sass Compiler 插件的 map 失效陷阱
这个插件默认开启 source map，但容易因路径配置错导致映射失败：
- 检查插件设置里的
liveSassCompile.settings.formats，每个 format 对象必须含"sourceMap": true -
liveSassCompile.settings.generateOnSave必须为true，否则保存时不触发编译 - 插件默认把 map 文件放在和 CSS 同级目录；若你在 CSS 中写了
/*# sourceMappingURL=../maps/style.css.map */这种相对路径，浏览器就找不到——要确保sourceMappingURL路径能被浏览器正确解析（通常建议用同级、不带../） - 插件对
@import的子文件支持较弱；如果主文件只 import 了_variables.scss但没实际使用变量，map 可能不包含子文件路径
最常被忽略的一点：浏览器开发者工具里，「Disable cache」必须勾选，且「Enable JavaScript source maps」和「Enable CSS source maps」两个开关都要打开——哪怕你确认 map 文件存在且内容正常，关掉任一开关都会让断点失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
