源码映射无法定位主因是浏览器未加载有效映射，90%问题源于sourceMappingURL注释非法、.map路径404或sources字段路径越界；需验证注释位置与格式、.map可访问性及内容合法性，并确保Webpack/Vite中多层loader sourcemap全链路开启且配置无误。
源码映射无法定位，不是 Sass 没生成 .map 文件，而是浏览器加载时根本没拿到有效映射——sourceMappingURL 注释错、.map 路径 404、或 sources 字段路径越界，三者占失效原因的 90%。
检查 CSS 文件末尾的 sourceMappingURL 注释是否合法
浏览器只认 CSS 文件最后一行的 /*# sourceMappingURL=main.css.map */，且必须满足：
- 是纯注释，前后无空格、无其他字符
- 必须是文件最后一行，后面不能有空行或 JS 注入代码
- 路径必须能被浏览器直接访问（比如
http://localhost:3000/css/main.css.map） - Webpack/Vite 等工具通常自动注入，但若用了
lightningcss或自定义 PostCSS 插件，可能删掉这行；查构建日志是否有 “Generated source map for”
验证 .map 文件内容和可访问性
用浏览器直接打开 sourceMappingURL 指向的地址，确认返回的是合法 JSON，并重点看：
-
sources字段是否非空，例如["button.scss", "mixins/_reset.scss"] - 路径不能含绝对路径（如
/Users/xxx/project/src/button.scss） - 不能越界（如
../../outside-project/vars.scss），否则浏览器无法解析 - 本地开发建议关掉服务器缓存（
Cache-Control: no-cache），避免复用旧.map文件
Webpack 中 sourcemap 是跨 loader 的传递链，漏一环就断
仅在 sass-loader 设 sourceMap: true 不够，CSS 映射需经多层透传：
-
sass-loader必须显式传{ sourceMap: true, implementation: require('sass') }（node-sass已弃用） -
css-loader的options.sourceMap也得为true，否则丢原始行号 - 若用
postcss-loader，同样要开sourceMap: true -
MiniCssExtractPlugin默认写绝对 URL，必须加publicPath: ''强制相对路径 -
devtool别用eval或cheap-module-eval-source-map，它们不支持 CSS 层映射
Vite 需同时开启两层 sourcemap 开关
css.devSourcemap 和 sassOptions.sourceMap 是两个独立开关，缺一不可：
-
css.devSourcemap: true控制 CSS 层处理链（如 PostCSS） -
css.preprocessorOptions.sass.sourceMap: true单独控制 Sass 编译层 - 拼写敏感：
sourceMap（驼峰）≠devSourcemap（中划线） - 若用了
@use '=/styles'这类别名，检查插件是否适配importer，否则sources可能为空
最容易被忽略的是：Dart Sass CLI 1.50+ 默认关闭 sourcemap，sass src/main.scss dist/main.css 根本不生成 .map，必须写成 sass --source-map src/main.scss dist/main.css，且 --source-map 参数必须放在输入输出路径之前——顺序错就静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
