生产环境必须禁用 CSS SourceMap，因其会暴露.less路径、变量名、@import依赖树等源码信息；Vue CLI需在vue.config.js中设css.sourceMap: false，Webpack项目须同步关闭css-loader、mini-css-extract-plugin和less-loader的sourceMap选项。
生产环境不该配 SourceMap —— 配了就等于把 .less 路径、变量名、@import 依赖树全暴露给任何人。
为什么生产环境必须禁用 CSS SourceMap
一个 styles.css.map 文件不只是行号映射，它直接包含：
• 原始 .less 文件的完整相对路径（如 src/styles/components/Button.less）
• 未压缩的变量名（@primary-color）、嵌套结构、注释内容
• 所有 @import 语句形成的依赖树，能反推出整个样式组织方式
• 如果用了 CSS-in-JS 混合方案，甚至可能泄露组件逻辑
浏览器 DevTools 的 Elements 面板只要加载了 styles.css.map，就能点进源文件 —— 这和 JS SourceMap 一样可逆向，不是“辅助调试”，是源码泄露面。
Vue CLI 项目如何真正关掉 CSS SourceMap
不能只靠 productionSourceMap: false 或删掉 devtool，CSS SourceMap 是独立控制的链路：
立即学习“前端免费学习笔记（深入）”；
-
vue.config.js中必须显式写：css: { sourceMap: false } - 若手动配置了
css.loaderOptions.less，确保里面没意外开启sourceMap: true - 检查是否引入了
postcss-loader，它的sourceMap选项也得设为false - 运行
find dist/ -name "*.css.map"，只要扫出任何.css.map文件，说明某处漏关了
Webpack 项目里三处必须同步关闭
CSS SourceMap 在构建链路上由多个环节生成，少关一处就白费：
-
css-loader的options.sourceMap必须为false（注意：Webpack 5+ 默认是true） -
mini-css-extract-plugin的构造参数中，sourceMap: false不能省略 - 如果用了
less-loader，它的options.sourceMap同样要设为false - 别信
devtool: false能管住 CSS —— 它对 CSS 层完全无效
真要定位生产 CSS 问题，换思路
SourceMap 不是唯一手段，且上线后本就不该依赖它：
- 用
console.log或debugger在关键 Less 变量或 mixin 入口打标记，配合 CSS 自定义属性（--debug-mode: true）做条件渲染 - 构建时加
process.env.NODE_ENV === 'production'条件，在 CSS 里注入带版本号的注释（如/* v2.4.1 Button styles */），方便比对部署产物 - 用 Puppeteer 或 Playwright 抓取线上页面的 computed styles，和本地构建产物 diff，快速锁定差异点
- Less 编译报错本身不依赖 SourceMap —— 确保 CI 构建日志开启
lessc --verbose，错误行号在编译阶段就能准确定位
最常被忽略的一点：开发环境开 SourceMap 是为了效率，但生产环境的“精准定位”不该建立在源码可访问基础上 —— 它应该来自构建产物的可追溯性、日志标记和自动化比对。
