vite中需同时配置css.devsourcemap: true和css.preprocessoroptions.sass.sourcemap: true才能生成sass源码映射，且build.cssminify必须设为false以保留.css.map文件。
为什么Vite里开了build.sourcemap: true却看不到Sass源码映射？
因为build.sourcemap只管JS，不管CSS。Vite默认在生产构建中完全忽略Sass的source map，即使你写了build.sourcemap: true，生成的.css.map文件也不会出现——它压根没被触发。
vite.config.js里必须同时配两个地方
Vite把CSS sourcemap拆成两层：预处理器层（Sass编译）和CSS处理层（打包/提取）。漏掉任一环，.css.map就断链。
-
css.devSourcemap: true：控制PostCSS、@import变基等CSS层的映射链路（开发环境默认true，但生产环境默认false） -
css.preprocessorOptions.sass.sourceMap: true：告诉Dart Sass在编译时生成map信息（默认false，必须显式开启）
示例配置：
export default defineConfig({
css: {
devSourcemap: true,
preprocessorOptions: {
sass: {
sourceMap: true
}
}
},
build: {
sourcemap: true // 这个只影响JS，但建议保留
}
})
生产环境想保留.css.map文件？得关压缩
Vite默认用esbuild或lightningcss压缩CSS，它们会直接删掉sourceMappingURL注释。要让.css.map随产物一起输出，必须禁用CSS压缩：
- 设置
build.cssMinify: false - 确保
css.devSourcemap和css.preprocessorOptions.sass.sourceMap都为true - 注意：
build.sourcemap: 'inline'对CSS无效，别试
Chrome DevTools里点不到.scss文件？先查三件事
就算配置全对，浏览器和IDE也得配合才行：
- Chrome DevTools → ⚙️ Settings → Preferences → Sources → 勾选
Enable CSS source maps - 检查生成的
.css.map里sources字段是否为项目内相对路径（如["button.scss", "mixins/_reset.scss"]），不能是/Users/xxx/或../../outside-project/ - 如果用了
@use '=/styles'这类别名，确认插件（如vite-plugin-sass-dart）是否透传了sources路径，否则sources可能为空
最常被忽略的是：Vite开发模式下devSourcemap虽默认开，但一旦加了css.preprocessorOptions.sass自定义配置，就必须手动补上sourceMap: true——不写就是关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
