必须同时满足sourcemap生成、路径映射、服务端暴露、浏览器加载四个条件才能实现DevTools点击跳转SCSS源文件，缺一不可。
不能直接靠 DevTools 点击跳转到 SCSS 源文件——除非你同时满足 sourcemap 生成、路径映射、服务端暴露、浏览器加载这四个硬条件，缺一不可。
Webpack + sass-loader 下 Source Maps 不生效的常见配置漏项
很多人加了 sassOptions.sourceMap: true 就以为完事了，但 webpack 的 devtool 配置会覆盖它。比如用了 "cheap-module-source-map"，它丢掉列信息，导致 SCSS 行号完全错位；"eval" 类模式则根本不生成独立 .map 文件。
- 必须显式设
devtool: "source-map"或"inline-source-map"（仅限开发） -
sass-loader的sourceMap和sourceMapIncludeSources都要为true，否则 .map 里没有sourcesContent - 若用 PostCSS（如 autoprefixer），
postcss-loader也得配sourceMap: true，否则 sourcemap 链在 Sass → CSS → 加前缀环节就断了
Vite 中 Sass sourcemap 跳转失败的路径陷阱
Vite 默认开 sourcemap，但一旦你自定义了 css.preprocessorOptions.sass，它就会清空默认配置——sourceMap: true 得手动补上。更隐蔽的问题是：Vite 构建时若 server.host 设为 true，生成的 .map 里 sources 会含 http://localhost:3000/src/xxx.scss，上线后必然 404。
- 生产构建前务必检查
build.sourcemap为true，且未被自定义 sass 配置覆盖 - 避免用
server.host: true生成生产包；改用resolve.alias统一源码根路径，或构建时通过插件重写sourceRoot - .map 文件末尾的
/*# sourceMappingURL=xxx.map */必须是最后一行，且不能有空行或注释——构建工具自动注入才可靠，手动改极易出错
浏览器显示 “Sources not found” 的真实原因
不是没生成 .map，而是浏览器按当前 CSS URL 解析相对路径时找错了地方。比如 CSS 被部署到 /static/css/app.css，但 .map 里 sources 写的是 ../src/scss/main.scss，浏览器就会尝试请求 /static/src/scss/main.scss，404。
立即学习“前端免费学习笔记（深入）”；
- 打开 .map 文件，检查
sources字段：路径是否以../开头？是否指向项目外目录？ - 用
sourceRoot: "/src"统一前缀（Sass CLI 加--source-map-include-sources，webpack 用devtoolModuleFilenameTemplate: '[resource-path]'） - Nginx 部署时，确保
location /src/能命中源码目录，或把 .map 和 .css 放同级，靠相对路径解析
生产环境要不要保留 SCSS Source Maps
能留当然方便定位，但代价明确：每个 .css 多一个同名 .map 文件，gzip 后仍增加 10%~30% 体积；更重要的是，sourcesContent 若开启，等于把全部 SCSS 源码明文塞进 .map，上线即暴露业务逻辑结构。
- 内部系统或灰度环境可全开；面向公网的生产站点建议关掉
sourceMapIncludeSources，只保留路径映射 - 若用监控平台（如 Sentry），需单独上传 .map 文件，且确保上传路径与
sourceMappingURL中的路径一致 - 本地开发务必关掉服务器缓存（
Cache-Control: no-cache），否则旧 .map 可能被复用，跳转永远不准
最常被忽略的一点：多层 @use 或混用 CSS-in-JS 时，跳转位置可能是被引入的模块里，而非你正在编辑的主文件——这不是 bug，是 sourcemap 按实际编译后结构映射的结果。
