SCSS 编译默认不生成有效 SourceMap，需显式启用；Dart Sass 1.50+ 起默认关闭，--source-map 必须前置；Webpack 需多环节协同（devtool、sass-loader、css-loader、mini-css-extract-plugin）；Vite 需 css.sourcemap: true；路径解析失败和缓存是“no sources”的主因。
SCSS 编译后没有可用的 SourceMap，不是“没生成文件”，而是编译器根本没建立源文件与 CSS 的映射关系——必须显式启用，且链路中任一环节断开都会导致失效。
为什么 sass CLI 默认不输出有效 .map 文件
Dart Sass 1.50+ 版本起，默认关闭 SourceMap 生成。即使你看到 style.css.map 被创建，内容也极可能是空 JSON：{"version":3,"sources":[],"mappings":"","file":"style.css"}。这不是 bug，是设计行为。
-
sass src/main.scss dist/main.css→ ❌ 完全不生成 map -
sass --source-map src/main.scss dist/main.css→ ✅ 生成独立.css.map（推荐） -
sass --embed-source-map src/main.scss dist/main.css→ ⚠️ map 内联进 CSS 底部，体积大，仅适合本地快速验证 - 参数顺序很重要：
--source-map必须写在输入输出路径之前，否则被忽略
Webpack 中 sass-loader 的 SourceMap 链路断裂点
只在 sass-loader 里写 sourceMap: true 不够。CSS 的 SourceMap 是跨 loader 透传的链条，漏掉任意一环，浏览器就收不到 sourceMappingURL 注释。
-
webpack.config.js的devtool不能用eval或cheap-module-eval-source-map，它们不支持 CSS 映射；推荐source-map或inline-source-map -
sass-loader配置中必须显式设sourceMap: true（不是靠全局devtool） - 如果用了
css-loader，它的options.sourceMap也得为true，否则 CSS 转 JS 模块时丢掉映射 - 若用
mini-css-extract-plugin，它默认把sourceMappingURL写成绝对路径，需加publicPath: ''修正
Vite 项目里 css.sourcemap 配置被静默忽略的真相
Vite 默认开发环境开启 Sourcemap，但这个“默认”极易被覆盖。很多项目升级后突然失效，就是因为配置项拼写或位置不对。
- 必须在
vite.config.js中显式写：css: { sourcemap: true }（注意是sourcemap，不是sourceMap） - 该配置只影响开发环境（
build.sourcemap是另一回事），生产环境默认关闭 - 如果用了自定义
@use别名（如@use '=/styles'），Sourcemap 可能因 importer 未适配而断裂，需检查插件兼容性 - Vite 的 PostCSS 处理阶段会合并 Sourcemap，若中间有插件（如
lightningcss）跳过 map 传递，也会导致最终丢失
浏览器里显示 “no sources” 的真实原因不是配置没开
你确认了 .css.map 存在、sourceMappingURL 注释也写了，但 DevTools 仍找不到源文件？问题大概率出在路径解析上。
- 打开浏览器 Network 面板，手动请求
style.css.map，检查响应体中sources字段的路径是否真实可访问（比如["../src/variables.scss"]在部署后变成 404） - 确保开发服务器（Webpack Dev Server / Vite / 自建 static server）把原始
.scss文件也托管出去，默认不托管源码 - VSCode 调试时，
sources里的路径（如webpack:///./src/styles/main.scss）必须能在当前工作区里按字面路径找到对应文件 - 缓存是最难排查的一环：浏览器、CDN、甚至 IDE 插件都可能缓存旧的 .map 或 CSS，强制刷新并禁用缓存再试
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
