默认不启用，必须显式添加--source-map参数；否则sass cli仅输出css文件，不生成.css.map，浏览器无法调试scss源码。
检查 sass 编译命令是否启用 --source-map
默认情况下，sass CLI 不生成 source map，必须显式开启。如果你用的是命令行编译（比如 sass src/style.scss dist/style.css），它不会自动输出 .css.map 文件。
正确做法是加 --source-map 参数：
sass src/style.scss dist/style.css --source-map
这会在 dist/ 下同时生成 style.css 和 style.css.map。注意：不加参数时即使有 sourceMap: true 配置（如在 Node API 中）也可能被忽略——CLI 和 JS API 行为不完全一致。
-
--source-map是基础开关；若需内联（即 map 内容直接写进 CSS 末尾），改用--source-map=inline - 使用
--source-map-urls可控制 map 文件路径引用方式（relative/absolute），默认是relative，但若 CSS 被挪动位置或通过 CDN 加载，可能找不到 map - 若项目用 Webpack 或 Vite，别只配 Sass Loader 的
sourceMap: true，还得确保devtool（Webpack）或build.sourcemap（Vite）也开启，否则浏览器 DevTools 不会加载
确认浏览器 DevTools 是否启用 source map 解析
即使文件生成了，Chrome/Firefox 默认也不会自动解析 CSS source map，除非你手动打开对应开关。
以 Chrome 为例：
- 打开 DevTools → Settings（F1）→ Preferences → Sources → 勾选
Enable CSS source maps - 同时确保
Disable cache (while DevTools is open)已启用，否则旧的无 map 的 CSS 可能被缓存 - 刷新页面后，在 Elements 面板里点击样式值（比如
color: #333）左侧的文件名，应跳转到.scss行号；若仍显示style.css:12，说明没生效
注意：某些浏览器扩展（如某些 CSS 注入工具、广告拦截器）会干扰 source map 加载，可尝试隐身窗口复现。
Webpack 中 Sass Loader 的 sourceMap 配置易错点
Webpack 用户常以为只要 Sass Loader 开了 sourceMap: true 就够了，其实它只是“让 Sass 生成 map”，不等于“让 Webpack 把 map 传给浏览器”。
必须同时满足三项：
- Sass Loader 配置中
sourceMap: true（或implementation: require('sass')+sourceMap: true） - Webpack
devtool设为'source-map'、'inline-source-map'或'eval-source-map'（'cheap-module-source-map'对 CSS 不可靠） - 输出配置中
devtool: 'source-map'不能被mode: 'production'覆盖掉——生产环境默认关闭 source map，需显式保留
示例关键片段：
module: {
rules: [{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } }
]
}]
},
devtool: 'source-map' // 必须显式设置，mode: 'development' 不保证它生效
Vue CLI 或 Vite 项目里 Sass source map 失效的常见原因
这类封装工具隐藏了底层配置，容易误以为“开了 dev 模式就自动支持”。实际中几个典型断点：
- Vue CLI 4.5+ 默认禁用 CSS source map；需在
vue.config.js中显式开启：css: { sourceMap: true } - Vite 项目需设
build.sourcemap: true（开发时默认开，但 build 后要调试就得开这个） - 如果用了
@import引入外部 Sass 库（如bootstrap/scss/bootstrap），而该库未提供 source map，整个链路会中断——Sass 不会为缺失 map 的导入文件生成映射，最终表现为部分样式无法跳转 - Vite 的
css.preprocessorOptions.sass若覆盖了sourceMap，会覆盖默认行为，建议只追加additionalData等字段，避免重写整个对象
真正起作用的从来不是“有没有 map 文件”，而是“浏览器能否按路径找到它 + 解析它 + 关联到原始 .scss 行号”。路径错一位、协议不匹配（http vs https）、CSP 阻止 data: URL 加载，都可能导致看似生成了却无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
