生产环境SCSS SourceMap失效主因是构建链路在压缩或部署环节被切断：css-minimizer-webpack-plugin默认关闭sourceMap、Vite build.minify抹除sourceMappingURL注释、私有化部署时路径因CDN/反向代理不可达。
生产环境 CSS 的 SCSS SourceMap 失效，不是“没生成”，而是构建链路在压缩或部署环节被主动切断——css-minimizer-webpack-plugin 默认关掉 sourceMap，Vite 的 build.minify 会抹掉映射注释，而私有化部署时 sourceMappingURL 路径又常因 CDN 或反向代理失效。
css-minimizer-webpack-plugin 不开 sourceMap 就不传映射
Webpack 生产构建中，CSS 压缩由 css-minimizer-webpack-plugin 承担。它默认禁用 SourceMap（哪怕你 webpack 配了 devtool: 'source-map'），必须显式开启：
-
sourceMap选项必须设为true，且要传进插件实例的配置项里，不是 loader 层 - 若用了自定义
minimizer链，漏掉这一项，CSS 就只剩压缩后的一行，.map文件压根不产出 - Vue CLI 4.x 用户注意：
OptimizeCssnanoPlugin已弃用且不支持 sourcemap，必须替换为css-minimizer-webpack-plugin并配{ sourceMap: true }
Vite 构建时 minify 破坏 sourceMappingURL 注释
Vite 5+ 在 build 模式下默认启用 CSS 压缩（build.minify: 'esbuild'），它会直接删掉 CSS 文件末尾的 /*# sourceMappingURL=xxx.css.map */ 注释——即使 .map 文件已生成，浏览器也根本找不到它。
- 解决方法：关掉 CSS 压缩，或改用不破坏注释的压缩器（如
csso） - 临时验证可用
build.minify: false，再检查 dist 目录下.css文件末尾是否保留注释 - 若必须压缩，需确保压缩器支持保留 sourcemap 注释（esbuild 的 CSS 压缩目前不保证这点）
私有化部署时 sourceMappingURL 路径不可达
生产环境常把 .map 文件单独上传到内网服务器或 CDN，但 sourceMappingURL 里的路径写死了相对位置（如 main.css.map），而实际访问地址可能是 https://maps.internal/project/main.css.map。
- 不能只靠
SourceMapDevToolPlugin输出文件，还得用publicPath或output.sourcemapFilename控制.map的 URL 生成逻辑 - Webpack 中推荐用
devtoolModuleFilenameTemplate重写sources字段路径，避免出现/Users/xxx/这类绝对路径 - Vite 用户需配合
build.rollupOptions.output.sourcemapPathTransform，把本地路径转成可访问的 HTTP 地址
真正难调试的点不在生成，而在路径透传：SCSS 编译、PostCSS 处理、CSS 压缩、文件输出、HTTP 服务、浏览器加载——任意一环的路径处理出错，Sources 面板就空着。先确认 .css 文件末尾有没有 sourceMappingURL，再查 .map 是否返回 200 且 sources 字段是相对路径，最后看 DevTools 是否把那个路径解析成可点击的文件节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
