CSS Source Map 会暴露原始 SCSS/Less 路径、未压缩类名与变量名、注释、@import 依赖树及 CSS-in-JS 组件逻辑；需在 vue.config.js、css-loader、MiniCssExtractPlugin、PostCSS 等各层显式关闭 sourceMap，而非仅依赖 devtool 或 productionSourceMap 配置。
生产环境下禁用 CSS Source Map 不是为了“省事”，而是防止源码结构、样式逻辑和路径信息被直接还原——它和 JS Source Map 一样，是可逆向的完整映射文件，不是调试辅助工具，而是潜在的攻击入口。
CSS Source Map 会暴露哪些具体信息？
一个 styles.css.map 文件里不只有行号映射，还包含：
• 原始 SCSS/Less 文件的完整相对路径（如 src/styles/components/Button.scss）
• 未压缩的类名、变量名、嵌套结构（比如 $primary-color 或 &:hover 层级）
• 注释内容（常见于设计系统文档注释或 TODO 标记）
• @import 依赖树，能反推出整个样式组织方式
• 如果用了 CSS-in-JS（如 styled-components），甚至可能泄露组件命名和 props 映射逻辑
为什么不能只关 JS Source Map 却留着 CSS 的？
很多团队只检查 devtool 和 productionSourceMap，却忽略了 CSS 构建链路独立生成 Source Map 的事实：
• css-loader 默认开启 sourceMap: true（尤其在 Vue CLI 或 Webpack 5+ 默认配置中）
• MiniCssExtractPlugin 会把 CSS 单独抽离，但若没显式关闭其 sourceMap 选项，仍会生成 .map
• PostCSS 插件（如 postcss-preset-env）也可能携带 source map 输出逻辑
• 即使 JS 没 map，浏览器 DevTools 的 Elements 面板仍能通过 styles.css.map 点击跳转到原始样式文件
如何真正禁用 CSS Source Map？
必须在构建链路每一层都切断，不能只靠框架默认值：
• Vue CLI：在 vue.config.js 中设 css: { sourceMap: false }
• Webpack：在 css-loader 的 options 里加 sourceMap: false；同时确认 MiniCssExtractPlugin 的 options.sourceMap 为 false
• Vite：在 vite.config.ts 中设 css: { devSourcemap: false }（注意：Vite 2.9+ 生产构建默认不生成 CSS Source Map，但开发模式仍开，需留意部署前是否误用开发产物）
• 注意：Webpack 的 devtool 控制 JS，对 CSS 无效；CSS Source Map 是 loader/plugin 独立控制的
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是：即使你关掉了所有配置，某些 UI 库（如 Element Plus、Ant Design Vue）的按需引入组件仍可能自带内联 Source Map。上线前用 find dist/ -name "*.css.map" 扫一遍，比任何配置检查都实在。
