css source map 仅限开发环境启用，生产环境必须禁用；因会暴露源文件路径与结构，且 vite 构建不生成 css sourcemap，esbuild 压缩还会丢弃其信息。
CSS Source Map 在生产环境默认不生成，也不能直接开启用于线上调试——它只应在开发阶段启用，生产环境必须禁用或脱敏处理。
为什么不能在生产环境直接用 CSS Source Map 调试
浏览器 DevTools 会自动加载 .css.map 文件并显示原始 SCSS/Less 文件，前提是这些 .map 文件被部署且可公开访问。但这就意味着：
- 所有
.scss、.less源文件路径和内容会通过sources字段暴露在 JSON 中 - 哪怕只是相对路径（如
["components/Button.scss"]），也能反推出项目结构 - Vite 生产构建时若设
build.sourcemap: true，它只管 JS，不会自动生成 CSS sourcemap；CSS sourcemap 需单独配置且默认关闭 - 即使你强行让 CSS sourcemap 构建出来，CDN 或 Nginx 若未配置
application/jsonMIME 类型，.map 请求也会被拒（404 或 403）
开发环境必须同时开两个开关
Vite 的 CSS sourcemap 是分层控制的，漏掉任意一层都会导致 Sources 面板只显示 .css，不出现 .scss：
-
css.devSourcemap: true：启用 PostCSS 层的映射（例如 autoprefixer、postcss-nested） -
css.preprocessorOptions.sass.sourceMap: true（或less/stylus）：启用 Sass 编译器自身的映射能力
二者缺一不可。常见错误是只配了后者，忘了前者——结果是 .css.map 有内容，但 sources 字段为空数组 []。
验证 .map 文件是否真正可用
别只看配置，要动手验证：
- 启动
vite dev后，打开浏览器开发者工具 → Network 面板 → 刷新 → 筛选.css.map→ 查看响应体中"sources"是否为项目内相对路径（如["Button.scss"]），而非绝对路径或../node_modules/... - 手动把一个 CSS URL 的
.css改成.css.map（如http://localhost:5173/assets/index.css→.../index.css.map），确认能返回有效 JSON - 检查响应头是否有
Content-Type: application/json；没有的话，本地开发服务器可能没正确设置 MIME 类型（Vite 默认支持，但自定义中间件可能覆盖）
生产环境想“类 Source Map”调试？换思路
真要定位线上 CSS 问题，靠公开 .map 文件是危险且低效的。更可行的做法：
- 保留带语义的类名：开发时用
css.modules.localIdentName: "[local]__[hash:base64:4]"，上线前切回"[hash:base64:8]"，这样至少能从 class 属性反查组件 - 用
build.rollupOptions.output.assetFileNames把 CSS 单独输出为未压缩版本（仅限灰度环境），配合devtools: { overlay: true }快速比对渲染差异 - 错误监控平台（如 Sentry）若支持 CSS 错误采集（如样式计算失败、@import 加载异常），可搭配 source map upload 工具上传私有 .map 到内部服务，不对外暴露
最常被忽略的一点：Vite 5.4+ 在生产构建中，build.cssMinify 默认启用 esbuild，而 esbuild 的 CSS 压缩器会主动丢弃所有 sourcemap 信息，哪怕你显式开了 css.devSourcemap——那个选项只对 vite dev 生效，对 vite build 完全无影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
