不能直接在生产环境点击跳转scss/less源文件，必须同时满足sourcemap生成、路径映射正确、服务端暴露源码、浏览器成功加载四个条件；webpack中devtool配置会覆盖loader层sourcemap设置，须设为"source-map"或"inline-source-map"，且postcss等中间环节也需透传sourcemap。
不能直接在生产环境靠点击跳转到 SCSS/Less 源文件——除非你同时满足 sourcemap 生成、路径映射、服务端暴露、浏览器加载这四个硬条件，缺一不可。
Webpack 中 devtool 配置覆盖 sass-loader 的 sourceMap
很多人在 sassOptions.sourceMap: true 之后就以为完事了，但实际生效的是 Webpack 的 devtool 配置。它会直接覆盖 loader 层的设置。
-
devtool: "cheap-module-source-map"丢掉列信息，SCSS 行号完全错位 -
devtool: "eval"或"eval-source-map"不生成独立.map文件，浏览器无法 fetch - 必须显式设为
devtool: "source-map"（生产可用）或"inline-source-map"（仅限开发） - 若用 PostCSS（如 autoprefixer），
postcss-loader也得配sourceMap: true，否则 sourcemap 链在 Sass → CSS → 加前缀环节就断了
Vite 构建时 sourceMap 路径写死 localhost 导致上线 404
Vite 默认开启 sourcemap，但一旦你配置了 css.preprocessorOptions.sass，它就会清空默认配置——sourceMap: true 得手动补上；更隐蔽的问题是：server.host: true 会让生成的 .map 文件中 sources 字段含 http://localhost:3000/src/xxx.scss，上线后必然 404。
- 生产构建前务必检查
build.sourcemap为true，且未被自定义 sass 配置覆盖 - 避免用
server.host: true生成生产包；改用resolve.alias统一源码根路径，或构建时通过插件重写sourceRoot -
.map文件末尾的/*# sourceMappingURL=xxx.map */必须是最后一行，不能有空行或注释——构建工具自动注入才可靠，手动改极易出错
浏览器显示 “Sources not found” 的真实原因
不是没生成 .map，而是浏览器按当前 CSS URL 解析相对路径时找错了地方。比如 CSS 被部署到 /static/css/app.css，但 .map 里 sources 写的是 ../src/scss/main.scss，浏览器就会尝试请求 /static/src/scss/main.scss，返回 404。
- 打开
.map文件，检查sources字段：是否以../开头？是否指向项目外目录？ - 用
sourceRoot: "/src"统一前缀（Sass CLI 加--source-map-include-sources，Webpack 用devtoolModuleFilenameTemplate: '[resource-path]'） - Nginx 部署时，确保
location /src/能命中源码目录，或把.map和.css放同级，靠相对路径解析 - 服务器必须允许访问
.map文件：Nginx 需加location ~ \.map$ { add_header Content-Type application/json; }
生产环境要不要保留 CSS Source Maps
能留当然方便定位，但代价明确：每个 .css 多一个同名 .map 文件，gzip 后仍增加 10%~30% 体积；且暴露源码结构，对部分业务属风险。
- 若必须上线，建议用
hidden-source-map（不写入sourceMappingURL注释），配合 Sentry 等平台上传解析 - 或用 Nginx 白名单限制：
location /src/ { allow 192.168.0.0/16; deny all; } - 最常被忽略的一环是缓存：确保
.css和对应.map文件名带内容哈希（如app.[contenthash].css），否则旧 CSS 会去拉旧.map，而它可能已失效
真正卡住的从来不是“怎么开”，而是路径映射是否对齐、服务端是否放行、浏览器是否能 GET 到那个 JSON 文件——三者任意一个断掉，DevTools 里就只剩空白面板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
