scss编译的css source map路径失效，因sources字段路径无法被浏览器加载：越界相对路径、绝对本地路径或与开发服务器暴露路径不匹配均导致404；需统一配置dart sass、vite、webpack等各环节sourcemap选项并校验路径有效性。
SCSS编译出的 CSS 文件 Source Map 路径不准确，**根本不是生成失败，而是 sources 字段里写的路径浏览器根本加载不到**——它可能越界（../../src/button.scss）、绝对（/Users/xxx/project/src/button.scss），或和开发服务器暴露的路径不匹配。
sources 字段里的路径为什么加载不了
浏览器拿到 .css.map 后，只认 sources 数组里的路径字符串，并按当前 CSS 文件 URL 做相对解析。一旦路径无法被开发服务器响应 200，Sources 面板就显示空白或压根不出现文件名。
-
sources值为["../../src/button.scss"]：CSS 在/css/main.css，浏览器会尝试请求/css/../../src/button.scss→/src/button.scss；若服务器没把/src/暴露出来，就是 404 -
sources值为["/Users/xxx/project/src/button.scss"]：这是绝对文件路径，现代浏览器禁止直接读取本地磁盘，必然失败 - Vite 开启
server.host: true后，sources可能变成["http://localhost:3000/src/button.scss"]：本地开发勉强能跳，但构建后部署到 Nginx 就彻底失效
Webpack 中 mini-css-extract-plugin 导致路径写死
这个插件默认把 sourceMappingURL 注释写成绝对 URL（如 http://localhost:3000/css/main.css.map），同时 sources 字段仍用相对路径。两者上下文错位，导致映射链断裂。
- 必须在插件配置中显式加
publicPath: ''，强制生成相对路径的注释 - 检查
output.publicPath和devServer.publicPath是否一致，否则注释里的路径前缀会多一层/myapp/类前缀 - 不要依赖
devtool自动注入——它只管 JS，对 CSS 的sourceMappingURL注释无影响
Dart Sass CLI 的 --source-map 参数位置陷阱
从 Dart Sass 1.50+ 开始，--source-map 不是可选开关，而是必须显式声明、且顺序敏感的参数。放错位置等于没开。
- ✅ 正确：
sass --source-map src/main.scss dist/main.css - ❌ 失效：
sass src/main.scss dist/main.css --source-map（被忽略，静默失败） - ⚠️ 临时验证可用：
--embed-source-map把 map 内联进 CSS 底部，绕过路径问题，但体积大，仅限本地 - 别用
node-sass：已弃用，@use映射行为异常，sources 字段常为空
Vite 下 sassOptions.sourceMap 容易漏配
Vite 的 css.devSourcemap: true 只控制 PostCSS 层，Sass 编译是另一条链——哪怕只改了一行 sassOptions，Vite 就清空所有默认配置，sourceMap: true 必须手动补上。
- 必须写全：
css: { devSourcemap: true, preprocessorOptions: { sass: { sourceMap: true } } } - 拼写不能错：
sourceMap（驼峰）≠devSourcemap（中划线），Vite 对大小写和连字符敏感 - 用了
@use '=/styles'这类别名？确认你用的 Sass 插件支持自定义importer，否则sources字段可能填的是别名路径而非真实相对路径
真正难调的不是“怎么开”，而是“哪一环悄悄关了”——Dart Sass、PostCSS、css-loader、mini-css-extract-plugin、Vite 的 sassOptions，任意一个漏掉或配错，sources 字段就会变成无效字符串或越界路径。动手前先 curl 一下 .css.map 地址，盯着 JSON 里的 sources 和 mappings 看两秒，比翻十页文档快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
