必须同时开启css.sourcemap和sass.sourcemap，且确保sources为相对路径或启用sourcemapincludesources:true，否则浏览器无法定位scss文件。
为什么开了 css.sourcemap: true 还定位不到 SCSS 文件
常见现象是 DevTools 里点样式跳转到空白页、Sources 面板里压根不显示 .scss 文件，甚至报错 Failed to load resource。根本原因不是配置没加，而是 Sass 编译链断了：Vite 的 css.sourcemap 只管 CSS 层，不自动透传到 Sass 预处理器层。哪怕你写了 css: { sourcemap: true }，只要没显式打开 Sass 自己的 source map，.map 文件里 sources 字段就是空的或写死绝对路径。
必须同时满足三件事：css.sourcemap 开启、sassOptions.sourceMap 显式设为 true、且不能因自定义 includePaths 等选项导致 Vite 清空默认预处理器配置。
vite.config.ts 中必须写的两处 Sass source map 配置
Vite 默认对 Sass 的 source map 是“惰性关闭”的——哪怕 css.sourcemap 为 true，它也不会自动给 sass 加 sourceMap: true。漏掉任何一处，.map 就无效。
-
css.sourcemap: true控制 CSS 处理链是否注入sourceMappingURL注释 -
css.preprocessorOptions.sass.sourceMap: true才真正让 Dart Sass 在编译时生成映射内容 - 如果用了
includePaths或additionalData，Vite 会清空所有默认sass配置，sourceMap: true必须手动补上，否则直接失效
正确写法示例：
export default defineConfig({
css: {
sourcemap: true,
preprocessorOptions: {
sass: {
sourceMap: true, // ⚠️ 必须显式写
includePaths: ['./src/styles'],
}
}
}
})
浏览器里点不动 SCSS 链接？检查 .map 文件的 sources 路径
即使配置全对，.map 文件里 sources 字段若含绝对路径（如 /Users/me/project/src/button.scss）或越界相对路径（如 ../../src/button.scss），浏览器照样无法加载源码。DevTools 不会报错，只是静默失败。
验证方法：
- 打开浏览器直接访问
http://localhost:3000/css/main.css.map，确认返回合法 JSON 且sources是相对路径数组，例如["button.scss", "mixins/_reset.scss"] - 用
tail -n 1 dist/main.css检查末尾是否有/*# sourceMappingURL=main.css.map */，且后面无空行 - Chrome DevTools → Settings → Preferences → Sources → 勾选
Enable CSS source maps
为什么用 --embed-source-map 或 sourceMapIncludeSources: true 更可靠
路径解析失败是开发期 Sourcemap 最顽固的问题。绕过路径，把原始 SCSS 内容直接塞进 .map 文件，是最稳的调试方案。
Vite 中没法直接传 CLI 参数，但可通过 sassOptions 模拟等效行为：
- 加
sourceMapIncludeSources: true（Dart Sass 支持），让.map的sourcesContent字段带上原始 SCSS 字符串，彻底摆脱路径依赖 - 这招在团队协作或 CI 环境尤其有用——不用管本地路径结构，DevTools 直接显示源码内容
- 代价是
.map体积增大，仅限开发环境，别上生产
配置片段：
css: {
preprocessorOptions: {
sass: {
sourceMap: true,
sourceMapIncludeSources: true
}
}
}
精确定位的关键不在“开了没”，而在“链路通不通、路径对不对、内容有没有”。sources 字段为空或含绝对路径，比没配还难排查——因为看起来一切正常，实际什么都没发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
