浏览器显示编译后行号是因为Sass 1.50+默认不生成source map，需显式加--source-map等参数；Webpack需sass-loader、mini-css-extract-plugin及devtool三处协同配置；Chrome/WebStorm还需手动启用CSS source maps。
为什么浏览器里看到的总是编译后的行号？
因为 Sass 默认不生成 source map，css 文件末尾没有 sourceMappingURL 注释，浏览器 DevTools 根本不知道原始 .scss 文件在哪。哪怕你写了 @debug 或加了 --line-numbers，也只在终端输出或加注释，不解决浏览器里“点不到源文件”的问题。
sass CLI 1.50+ 必须显式加 --source-map
旧版本默认开启，新版本（Dart Sass ≥1.50）默认关闭。不加参数，sass src/main.scss dist/main.css 只输出纯 CSS，连警告都静默。
-
--source-map：生成独立main.css.map文件（推荐，开发调试用） -
--embed-source-map：把 map base64 编码后塞进main.css底部（体积大，仅限快速验证） -
--no-source-map：强制关闭（CI/生产构建常用）
⚠️ 参数必须和输入输出路径写在一起：sass --source-map src/main.scss dist/main.css；单独写 sass --source-map main.scss 会报错。
Webpack 需三处同时配 sourceMap
只在 sass-loader 里设 sourceMap: true 不够——CSS 提取插件（如 mini-css-extract-plugin）不配，最终 CSS 就没 sourceMappingURL 注释，浏览器读不到 map。
-
sass-loader的options.sourceMap设为true -
mini-css-extract-plugin的options.sourceMap也设为true - Webpack 自身的
devtool建议用eval-source-map或cheap-module-source-map（开发环境）
Chrome 和 WebStorm 还要手动开开关
即使构建链路全通，.map 文件躺在磁盘上也没用——浏览器和 IDE 默认不读它。
- Chrome：打开 DevTools → ⚙️ Settings → Preferences → Sources → 勾选 Enable CSS source maps
- WebStorm File Watcher Arguments 示例：
--no-cache --source-map $FileName$: $FileParentDir$/css/$FileNameWithoutExtension$.css - HTML 中引入的必须是
.css文件（不是.scss），且该 CSS 文件末尾要有sourceMappingURL注释
最容易被忽略的是：Vite 的 css.sourcemap 虽然开发环境默认 true，但一旦用了 lightningcss 等替代处理器，Sass 的 sourcemap 链路就直接被绕过——得检查是否意外启用了它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
