vite 中 build.sourcemap: 'inline' 仅对 js 生效，css 不支持内联 sourcemap；生产环境需关闭 cssminify 并设置 css.sourcemap: true 才能生成独立 .css.map 文件。
build.sourcemap: 'inline' 在 Vite 中确实可以将 SourceMap 内联进最终产物，但它只对 JavaScript 文件生效，不适用于 CSS。
这是关键前提：Vite 的 build.sourcemap 配置项控制的是 JS bundle 的 sourcemap 输出方式（true / 'inline' / 'hidden'），而 CSS 的 sourcemap 行为是独立控制的，且默认在生产构建中被禁用、也不支持 'inline' 模式。
✅ 正确理解：JS 和 CSS 的 sourcemap 是两套机制
| 类型 | 控制配置 | 生产环境默认 | 是否支持 'inline'
|
输出形式 |
|---|---|---|---|---|
| JS sourcemap | build.sourcemap |
false |
✅ 支持（生成 base64 data URL 注释） | //# sourceMappingURL=data:application/json;base64,... |
| CSS sourcemap |
css.devSourcemap（仅开发）build.cssMinify 会自动丢弃 |
❌ 不生成（即使开了 build.sourcemap: true） |
❌ 不支持 'inline'
|
只能生成独立 .css.map 文件（需手动干预） |
⚠️ 注意：Vite 官方文档和源码行为明确表明 ——
build.sourcemap: 'inline'不会让 CSS 也内联 map。CSS 的 sourcemap 在生产构建中默认被压缩器（如 esbuild 或 lightningcss）剥离，且 Vite 没有提供build.cssSourcemap: 'inline'这类选项。
✅ 如果你真想让 CSS 源码可追溯（生产环境谨慎使用）
虽然不能“内联”，但可通过以下组合实现 CSS sourcemap 文件随产物一起输出（即 .css + .css.map 同时存在）：
- 确保关闭 CSS 压缩（因为压缩器会主动删 map）
- 显式启用 CSS sourcemap（Vite 5+ 推荐用
css.sourcemap） - 配合
build.sourcemap: true（虽不直接影响 CSS，但保持一致性）
// vite.config.ts
export default defineConfig({
build: {
sourcemap: true, // ? 让 JS 生成 .js.map（可选）
cssMinify: false, // ? 关键！禁用 CSS 压缩，否则 .map 会被丢弃
},
css: {
sourcemap: true, // ? Vite 5+ 推荐写法（替代旧版 css.devSourcemap）
}
})
构建后你会得到：
dist/ ├── assets/index.abc123.css ├── assets/index.abc123.css.map ← 这个文件存在且有效 └── assets/index.abc123.js
浏览器加载 .css 时，只要文件末尾有 /*# sourceMappingURL=index.abc123.css.map */ 注释（Vite 自动生成），就能关联映射。
❌ 为什么 CSS 不能像 JS 那样 'inline'？
- CSS 规范不支持 data URL 方式内联 sourcemap（不像 JS 可用
//# sourceMappingURL=data:...） - 浏览器开发者工具对 CSS sourcemap 的解析依赖外部
.map文件或响应头SourceMap:，不识别注释里的 base64 - Vite 底层使用的 CSS 处理链（如 lightningcss/esbuild）不提供内联 map 的能力，只支持输出独立文件
? 验证是否生效
构建后检查：
-
dist/assets/*.css文件末尾是否有/*# sourceMappingURL=xxx.css.map */ - 对应的
.css.map文件是否存在且 JSON 格式合法（打开看sources字段是否指向你的.scss/.css原文件） - 在 Chrome DevTools → Elements → 选中元素 → Styles 面板，点击右侧文件名（如
button.scss:12）能否跳转到源码
不复杂但容易忽略：JS 和 CSS 的 sourcemap 必须分开配置，且 CSS 在生产中要保留 map，核心就两条——关压缩、开 sourcemap。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
