sass源码映射默认不开启，需在cli加--sourcemap、webpack配devtool为"source-map"且sass-loader/postcss-loader均启用sourcemap、vite中css.preprocessoroptions.sass显式设sourcemap:true，并确保.map路径可访问。
能生成，但默认不开启——Sass CLI、Webpack、Vite、WebStorm 等工具都得显式配 --sourcemap 或对应开关，否则你看到的 .map 文件根本不存在，DevTools 里点不到源文件是常态，不是浏览器问题。
CLI 编译必须加 --sourcemap 参数
Dart Sass（官方推荐）默认关闭 source map，不加参数就只输出 CSS：
-
sass input.scss output.css→ 无.map文件 -
sass --sourcemap input.scss output.css→ 生成output.css.map，且末尾自动加/*# sourceMappingURL=output.css.map */ - 若用
--no-source-map-urls，会删掉末尾注释，浏览器无法定位 .map，慎用 - 路径要可访问：确保
output.css和output.css.map同目录，或相对路径在部署后仍有效（比如都放在/static/css/下）
Webpack 中 devtool 会覆盖 sass-loader 的配置
很多人在 sassOptions.sourceMap: true 后以为搞定，结果 sourcemap 失效——因为 Webpack 的 devtool 优先级更高，直接忽略 loader 层设置：
-
devtool: "cheap-module-source-map"→ 丢列信息，SCSS 行号错位严重 -
devtool: "eval"或"eval-source-map"→ 不生成独立.map文件，仅内联，上线后失效 - 生产环境用
devtool: "source-map"；开发环境可用"inline-source-map"（但别上生产） - PostCSS 插件（如
autoprefixer）也得开sourceMap: true，否则 sourcemap 链在 CSS → 加前缀环节断裂
Vite 构建时 css.preprocessorOptions.sass 会清空默认配置
Vite 默认开启 sourcemap，但一旦你写了 css.preprocessorOptions.sass，它就重置为 {}，sourceMap: true 得手动补：
-
css.preprocessorOptions.sass = { sourceMap: true }是必须项 - 更隐蔽的是：
server.host: true会让生成的.map里sources字段含http://localhost:3000/src/xxx.scss，上线后 404 - 构建前检查
build.sourcemap是否为true，且没被自定义 sass 配置覆盖 - 推荐用
resolve.alias统一源码根路径，或插件重写sourceRoot，避免依赖 localhost 路径
WebStorm / VSCode 自动编译容易漏掉 --sourcemap
编辑器内置 File Watcher 默认只生成 CSS，不带 map —— 即便你装了 Dart Sass，也得手动改 Arguments：
- WebStorm：Arguments 改成
$FileName$:$FileDir$/$FileNameWithoutExtension$.css --sourcemap --no-cache - VSCode 的
liveSassCompile.settings.generateMap必须设为true，否则只出 CSS -
Output paths to refresh要包含.map文件，比如$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map - 注意大小写：
--sourcemap（Sass）≠--source-map（Less），写错就无效
最常被忽略的不是“怎么开”，而是“怎么让浏览器正确加载”：.map 文件里的 sources 是相对路径，浏览器按当前 CSS URL 解析，不是按项目结构。部署后路径一变，../src/xxx.scss 就变成请求 /static/src/xxx.scss，404 是必然结果——得靠 sourceRoot 或 Nginx 路由兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
