能调试但默认不生效——Dart Sass CLI、Webpack、Vite均默认关闭或覆盖sourcemap，必须验证三件事：CSS末尾有合法sourceMappingURL注释、.map文件可被浏览器直接访问且sources非空、Sources面板显示.scss文件名。
能调试，但默认不生效——Dart Sass CLI、Webpack、Vite 都默认关闭或覆盖 sourcemap，光加 --sourcemap 或设 sourceMap: true 不够，必须验证三件事：CSS 文件末尾有 /*# sourceMappingURL=xxx.css.map */、对应 .map 文件可被浏览器直接访问、DevTools Sources 面板里真出现了你的 .scss 文件名。
Chrome DevTools 点不到 .scss 文件？先确认 sourcemap 是否真生成
不是配了就生效，而是“没生成”才是常态。常见现象：点样式跳转到空白页、Sources 里只有 webpack:// 或 http:// 路径、右键样式 → “Reveal in Sources” 失败。
-
.css文件末尾必须有且仅有一行/*# sourceMappingURL=xxx.css.map */，且必须是最后一行（后面不能有空行或注释） - 手动访问
http://localhost:3000/css/index.css.map应返回 JSON 内容，404 或 500 就说明没生成或路径错 - Dart Sass CLI 默认关闭 sourcemap：必须显式加
--source-map（旧版）或--source-map=inline/--source-map（Dart Sass 1.20+） - Webpack 用户注意：
devtool会覆盖sass-loader的配置；"cheap-module-source-map"丢列信息，"eval"不生成独立.map文件，必须用"source-map"或"inline-source-map"
Webpack + sass-loader 下 sourcemap 链断裂的典型漏项
sourcemap 是一条链：SCSS → CSS → PostCSS 处理 → 最终 CSS。任一环节断开，跳转就失效。
-
sass-loader必须同时设sourceMap: true和sourceMapIncludeSources: true，否则.map里没有原始 SCSS 内容 - 如果用了
postcss-loader（如autoprefixer），它也得配sourceMap: true，否则链在 PostCSS 步骤就断了 - 确保
css-loader开启 sourceMap：{ loader: 'css-loader', options: { sourceMap: true } } - 别用已弃用的
node-sass；sass-loader必须搭配dart-sass（即sassnpm 包），否则@use相关映射行为异常
Vite 中 Sass sourcemap 跳转失败的路径陷阱
Vite 默认开启 CSS sourcemap，但 Sass 层是独立控制的；更麻烦的是，它会把开发服务器地址硬编码进 .map 的 sources 字段。
立即学习“前端免费学习笔记（深入）”；
-
css.preprocessorOptions.sass一旦被自定义（哪怕只加了个includePaths），Vite 就清空默认配置，sourceMap: true必须手动补上 - 若
server.host: true，生成的.map中sources可能是["http://localhost:3000/src/style.scss"]—— 构建生产包时绝对不能留这个 - 构建前检查
build.sourcemap是否为true，且未被css.preprocessorOptions.sass配置意外覆盖 - 推荐做法：设
css.preprocessorOptions.sass.sourceMap: true+css.devSourcemap: true，再用插件重写sourceRoot或统一设resolve.alias指向源码根目录
@use 导致跳转行号偏移，怎么定位真正编辑的文件？
这不是 bug，是 Dart Sass 的设计：@use 把所有依赖模块“扁平化”进当前上下文，跳转位置常落在被引入的 mixin 或变量定义处，而非你正在写的文件。
- 右键 DevTools Sources 里错误跳转的
_mixins.scss→ “Blackbox Content Script”，刷新后跳转会退回到引用它的main.scss - 避免单个文件里
@use过多、混用@import；优先用@use，但控制层级（最多两层嵌套） - 小项目可加
--source-map-include-sources（CLI）或sourceMapIncludeSources: true（Webpack），把原始 SCSS 内容直接塞进.map，绕过路径解析 - 检查
.map文件里的sources字段：必须全是项目内可访问的相对路径（如["button.scss", "mixins/_reset.scss"]），绝不能含/Users/xxx/或../../outside-project/
最易忽略的其实是 .map 里 sources 的路径解析逻辑——它按 CSS 文件 URL 解析相对路径，不是按项目结构猜的。部署后跳转失败，90% 是因为 sources 值里的 ../ 在线上环境越界了。
