chrome 点不到 .scss 文件是因为 sourcemap 链路断裂：css 末尾缺少正确 sourcemappingurl 注释、sass 编译未启用 --source-map、webpack/vite 各环节 sourcemap 开关未全开启，或 devtools 未启用 css source maps。
Chrome 里点不到 .scss 文件？先确认 CSS 末尾有 sourceMappingURL
浏览器只认 CSS 文件最后一行的 /*# sourceMappingURL=main.css.map */，且必须是纯注释、后面不能有空行或额外字符。如果这行缺失或路径错误（比如写成 ../maps/main.css.map 但服务器没暴露 /maps/ 目录），Chrome 就不会加载 map。
验证方法：tail -n 1 dist/main.css（macOS/Linux）或用编辑器直接看文件末尾；再手动访问 http://localhost:3000/css/main.css.map，确保返回非空 JSON，且 sources 字段包含类似 ["button.scss", "mixins/_reset.scss"] 的相对路径。
sass CLI 编译必须加 --source-map，且位置不能错
Dart Sass 1.50+ 默认关闭 sourcemap，sass src/main.scss dist/main.css 不会生成任何 map 文件，连警告都没有。
-
sass --source-map src/main.scss dist/main.css：生成独立.css.map文件（推荐） -
sass --embed-source-map src/main.scss dist/main.css：map 内联进 CSS 底部（适合快速验证，体积大） -
--source-map必须紧挨输入输出路径，写成sass --source-map main.scss css/main.css会报错 - 若需控制 map 中的路径引用方式，可加
--source-map-urls=absolute或=relative
Webpack 用户容易漏掉的三个 sourcemap 开关
sourcemap 是一条链：SCSS → CSS → PostCSS → 最终 CSS。任一环节断开，Chrome 就无法跳转到 .scss。
-
sass-loader配置中设sourceMap: true和sourceMapIncludeSources: true（后者保证原始 SCSS 内容打进 map） -
css-loader也要开启sourceMap: true -
mini-css-extract-plugin的options.sourceMap同样要设为true - Webpack 自身的
devtool别用cheap-module-source-map（丢列信息）或eval（不生成独立 map），改用source-map或inline-source-map
Vite 中 sassOptions.sourceMap 是独立开关，不能只靠 css.devSourcemap
Vite 的 css.devSourcemap: true 只控制 CSS 处理层，Sass 编译本身默认不透传 sourcemap——尤其当你自定义了 css.preprocessorOptions.sass（哪怕只加了个 includePaths），Vite 就会清空默认配置，必须手动补上。
正确写法：
export default defineConfig({
css: {
devSourcemap: true,
preprocessorOptions: {
sass: {
sourceMap: true // 必须显式写这一行
}
}
}
})另外注意：若用了 lightningcss 等替代处理器，它会绕过 Sass 的 sourcemap 链路，导致失效。真正卡住人的地方，往往不是“怎么配”，而是“配了但没生效”——因为每个工具都只负责自己那截链路，而浏览器 DevTools 还得手动打开 Enable CSS source maps，否则所有配置都是静默的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
