<p>Less 中 // 注释编译后必然消失，因其仅为预处理器源码注释；/ / 可透传但受 CSS 压缩影响；/! / Less 不支持；关键信息应通过构建后处理或约定变量前缀实现。</p>
Less 编译后 CSS 注释丢失，基本就是用了 // 单行注释——它本就不该出现在最终 CSS 里，不是 bug，是设计如此。
为什么 // 注释在编译后彻底消失
Less 的 // 是预处理器层的“源码注释”，类似 JS 中的 //，只供开发者阅读，编译阶段直接剥离，不参与任何 CSS 输出。浏览器根本看不到，sourcemap 里也查不到对应位置。
- 误用场景：把
//当成临时禁用某条样式规则，结果发现样式异常，却查不到被“注释掉”的痕迹 - 调试陷阱：在嵌套 mixin 里写
// debug: true，以为能定位逻辑，实际编译后连空格都不剩 - 构建无感知：Webpack/Vite 的 CSS 压缩插件（如
css-minimizer-webpack-plugin）根本收不到它，自然谈不上保留或删除
必须用 /* */ 才能保留在生成的 CSS 中
/* */ 是 CSS 原生语法，Less 直接透传，编译后原样输出。但要注意它并非“绝对安全”：
- 如果构建流程启用了 CSS 压缩（默认常见），
/* */仍可能被删——取决于压缩器配置，比如cssnano默认会移除所有非/*! */注释 - 写在 mixin 调用处的
/* */（如.btn { .btn-base(); /* primary variant */ }）会出现在生成 CSS 的规则上方，可能干扰压缩器对选择器合并的判断 - 多层嵌套 mixin 内混用
/* */，容易导致 sourcemap 行号偏移，Chrome DevTools 点击跳转错位
需要上线还可见？改用 /*! */（仅 Sass 支持，Less 不认）
Less 没有 /*! */ 语法支持。别试图写 /*! 版权声明 */ 并指望它绕过压缩——Less 编译器不识别 ! 前缀，它就等同于普通 /* */；能否保留，完全交给下游 CSS 压缩工具决定。
立即学习“前端免费学习笔记（深入）”；
- 若你用的是 Sass，
/*! */是强制保留机制；Less 用户得换思路 - 真要确保版权/版本信息不丢，建议放在构建后处理阶段，用 PostCSS 插件注入（但需避开与 Less 原生
/* */冲突） - 更稳妥的做法：把关键元信息写进
@import语句前的独立/* */块，并在构建配置中显式禁用对该块的压缩（如 cssnano 的presets: ['default', { discardComments: { removeAllButFirst: true } }]）
想带文件名和行号？别依赖动态生成，用变量模拟
Less 不支持 __LINE__ 或 __FILE__ 这类宏。但可通过团队约定的变量前缀逼近效果：
- 每个
.less文件顶部统一加：@comment-prefix: "/* [src/components/Button.less] "; - 写注释时拼接：
@{comment-prefix}基础样式重置 */ - 避免用
~""拼接字符串——新版 Less 已弃用，且无法参与变量运算 - 搜索定位友好：
grep "\[src/" dist/main.css可快速定位来源文件
真正难处理的不是语法选错，而是混合使用 // 和 /* */ 时，不同成员对“注释是否上线”缺乏共识。一个 // 写在变量定义前，另一个在 mixin 调用后补 /* */，时间一长，连谁写的、为什么写都不可追溯。
