CSS行号跳转到.scss差几行，是因sourcemap在SCSS→CSS→PostCSS→CSS提取链中被多次转换叠加偏移；需确保sass-loader、css-loader、postcss-loader及mini-css-extract-plugin等各环节均启用sourceMap并透传路径。
为什么 CSS 行号跳转到 .scss 里差几行？
不是浏览器抽风，是 sourcemap 在编译链中被多次转换后叠加偏移。Dart Sass 生成的 .map 只记录 .scss → .css 这一层映射；但 Webpack/Vite 里若还有 postcss-loader、css-loader 或 mini-css-extract-plugin 等中间环节，每一步都可能重写或覆盖 sourcemap，最终导致行号“漂移”。
常见现象：.scss 第 42 行写的 @include button-variant($primary)，DevTools 却跳到第 38 或 47 行——这说明某环节的 sourcemap 没透传，或者 mappings 插值计算出错。
-
sass-loader必须显式设sourceMap: true，不能依赖devtool（它只管 JS） -
css-loader默认关闭 sourcemap，必须手动加options: { sourceMap: true } - 用了
postcss-loader（比如 autoprefixer），它也得配sourceMap: true，否则链在 PostCSS 就断了 - Vite 用户要同时开
css.devSourcemap: true和css.preprocessorOptions.sass.sourceMap: true，漏一个就失效
为什么 .map 文件里的 sources 路径无法访问？
浏览器报 404 加载 main.css.map，往往不是文件没生成，而是里面 sources 字段写的路径根本不在服务范围内。比如 sources: ["../src/components/Button.scss"]，但开发服务器只托管 /dist/ 目录，../src/ 自然打不开。
CLI 编译时用 --source-map-root 可控根路径；Webpack 中则需配合 devtoolModuleFilenameTemplate 重写 URL；Vite 则默认用绝对路径硬编码（如 http://localhost:3000/src/Button.scss），生产构建时直接失效。
立即学习“前端免费学习笔记（深入）”；
- Webpack 项目务必检查
mini-css-extract-plugin的publicPath: ''，否则它会把sourceMappingURL写成绝对 URL - Vite 用户若自定义了
css.preprocessorOptions.sass（哪怕只加了includePaths），Vite 就清空默认配置，sourceMap: true必须手动补上 - 用
curl -I http://localhost:3000/css/main.css.map验证响应是否 200，再打开 JSON 看sources是否非空且路径可访问
为什么 DevTools Sources 面板里没有 .scss 文件？
看到 main.css.map 返回正常，但 Sources 里只有 webpack:// 或空白节点——大概率是 sources 字段里的路径格式不被浏览器接受。
绝对路径（/Users/xxx/project/src/Button.scss）、越界相对路径（../../outside/Button.scss）、带查询参数的 URL（Button.scss?123）都会让 DevTools 拒绝加载。它只认项目内相对路径或能被当前服务器响应的 URL。
- Dart Sass CLI 加
--source-map-embed可绕过路径问题（map 内联进 CSS），适合本地快速验证 - Webpack 中推荐用
devtoolModuleFilenameTemplate: '[absolute-resource-path]'，避免webpack:///协议被拦截 - Vite 用户需注意
build.rollupOptions.output.sourcemapPathTransform才能重写 sources 路径，否则开发环境和生产环境行为不一致
为什么 @use 引入后 sourcemap 定位混乱？
@use 是模块化引入，编译后 CSS 规则可能来自多个源文件，而 sourcemap 有时只标记最终输出位置，丢失原始模块上下文。相比之下，@import 是内容拼接，sourcemap 映射更线性。
典型表现：点一条 .btn-primary 样式，跳转到 _mixins.scss 里某条无关的 @function 声明，而不是 _buttons.scss 中定义它的那一行。
- 调试时临时把
@use改成@import，验证是否为模块机制导致映射失准 - 避免在
@use后紧跟深度嵌套规则；复杂样式建议拆成独立选择器，减少 sourcemap 插值误差 - Dart Sass 1.50+ 推荐用
--style expanded（而非compressed）生成 CSS，保证每条规则独占一行，映射更准
sass-loader 配置，先用 Network 面板确认 .css.map 能否 200 加载，再看 JSON 里 sources 是否合理。 
