SCSS编译后CSS无行号映射是因未启用sourcemap：CLI需加--source-map参数，Webpack需sass-loader与css-loader均设sourceMap:true，Vite需检查build.sourcemap未被禁用。
SCSS编译后CSS没有行号映射，浏览器开发者工具点不中源文件？
默认用 sass CLI 或 Webpack 的 sass-loader 编译时，如果不显式启用 sourcemap，生成的 CSS 文件里不会包含 sourceMappingURL 注释，浏览器自然无法跳转回 .scss 行。这不是浏览器问题，是编译配置漏了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- CLI 方式：加
--source-map参数，例如sass src/style.scss dist/style.css --source-map；若需内联 sourcemap（调试快但体积大），用--source-map-embed - Webpack +
sass-loader：确保sass-loader配置中sourceMap: true，且上层 loader（如css-loader）未禁用sourceMap（css-loader默认关闭，需手动设为true） - Vite 项目：默认已开启 sourcemap，但若用了
build.sourcemap: false覆盖了开发配置，需检查defineConfig中build.sourcemap是否被误关
开启了 sourcemap，但 Chrome DevTools 仍显示 CSS 行号而非 SCSS 行号？
常见原因是 sourcemap 文件没被正确加载，或路径解析失败。浏览器控制台 Network 标签页里搜 .map，看对应 .css.map 是否返回 200；若 404，说明路径不对。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- CLI 编译时加
--source-map-root指定 map 文件根路径，避免相对路径出错；例如--source-map-root /static/，确保服务器能按此路径提供 .map 文件 - Webpack 中若输出 CSS 到非根目录（如
dist/css/），需同步设置devtoolModuleFilenameTemplate，让 sourcemap 里的sources字段指向可访问的 URL 路径，而非本地绝对路径 - 检查浏览器是否禁用了 sourcemap：DevTools → ⚙️ Settings → Preferences → Sources → 勾选
Enable JavaScript source maps和Enable CSS source maps
使用 @import 或 @use 引入多个 SCSS 文件，断点跳转后定位到错误的文件或行？
SCSS 的 @import（旧语法）会把内容直接拼接进主文件，sourcemap 通常能正确映射；但 @use 是模块化引入，编译后 CSS 规则可能来自多个 @use 模块，而 sourcemap 有时只标记最终输出位置，丢失原始模块上下文。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
@use，但调试时临时改用@import验证是否为模块机制导致映射混乱 - 在
sassCLI 中加--style expanded（而非compressed），保证生成的 CSS 每条规则独占一行，sourcemap 行号更准 - 避免在
@use后紧跟大量嵌套规则；复杂样式建议拆成独立选择器，减少 sourcemap 插值误差
Vue / React 单文件组件里写
单文件组件的 <style> 块由框架专用 loader（如 vue-style-loader、vue-cli-service 内置逻辑）处理，其 sourcemap 生成链比纯 SCSS 更长，任一环节断开都会导致热更新后映射错乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Vue CLI 项目：确认
vue.config.js中css.sourceMap设为true；若用了css-loader自定义配置，必须保留sourceMap: true - React + Vite：确保
vite.config.ts中未覆盖css.devSourcemap（默认为true），且未在build.rollupOptions.plugins里误删css插件 - 遇到 HMR 后 sourcemap 错位，先强制刷新页面（而非仅热更新），排除缓存干扰；再检查控制台是否有
Failed to parse SourceMap警告
最易被忽略的是 sourcemap 的“传递性”——它需要从 SCSS 编译器开始，经 CSS 处理器（如 autoprefixer）、打包工具（Webpack/Vite）、再到浏览器，每个环节都得支持且未被显式关闭。少一个 sourceMap: true，就断一环。
