<p>Less编译后注释消失有两种情况：//单行注释在解析阶段即被完全剥离，永不输出CSS；/ /块注释虽由Less透传，但常被css-minimizer-webpack-plugin等压缩工具默认删除，需配置preserveComments保留。</p>
Less 编译后注释“消失”，基本就两种情况：要么你写了 // 单行注释，它压根就不会进 CSS；要么你写了 /* */ 块注释，但它被下游压缩工具删了——不是 Less 的错，是构建链路没配对。
为什么 // 注释永远不出现在 CSS 里
// 是 Less 解析阶段就跳过的源码注释，不生成 AST，不输出任何内容。它和 JS 里的 // 完全同理，只对人有效，对构建流水线透明。
- 常见误用：
.btn { // 主色按钮; color: red; }→ 编译后只剩.btn { color: red; }，注释和分号前的空格全丢 - 临时禁用某行样式？写
// color: red;看似方便，但编译后那行根本不存在，容易误判逻辑还在 - 调试时在 mixin 里写
// debug: true，结果 Chrome DevTools 里连个空格都找不到对应位置
/* */ 注释为什么有时也看不到
/* */ 会被 Less 原样透传，但 Webpack/Vite 默认启用的 CSS 压缩器（比如 css-minimizer-webpack-plugin 或 cssnano）会把它当普通注释删掉——除非你明确告诉它留着。
- Webpack 项目中，
minimize: true开启后，css-minimizer-webpack-plugin默认preserveComments: false - Vite 用
cssnano时，v5+ 版本默认移除所有非/*! */注释（注意：Less 不支持/*! */语法，写了也白搭） - 旧版
lessc（v3.x）若检测到@{version}变量未被实际引用，连带其所在的/* v@{version} */也会被优化掉
怎么让关键注释真正在线上可见
必须同时满足两个条件：用对语法 + 配对压缩器。缺一不可。
立即学习“前端免费学习笔记（深入）”；
- 业务说明、版权、模块归属、兼容性提示，一律用
/* */，别碰// - 在
css-minimizer-webpack-plugin配置里加preserveComments: /v\d+\.\d+\.\d+|Copyright|@license/ - 避免把版本号写成孤立变量；改成直接拼接：
/* v@{version} — built @ {@build-time} */，并确保@{version}在当前作用域有实际用途（比如赋给body[data-version]） - 上线前手动
curl your-site.com/style.css确认注释是否真在产物里——别信本地编译输出
想带文件名和行号？别指望自动，用变量模拟
Less 没有 __FILE__ 或 __LINE__ 宏。但可以用变量约定逼近效果，前提是团队统一格式。
- 每个
.less文件顶部定义：@comment-prefix: "/* [src/components/Button.less] "; - 写注释时拼接：
@{comment-prefix}基础样式重置 */ - 别用
~"string"—— 新版 Less 已弃用，且无法参与变量计算 -
@comment-prefix必须在每个文件里重新定义，不能靠@import一次注入全局（路径会错乱）
最常被忽略的点：以为写了 /* */ 就万事大吉，结果压缩器静默删掉；或者误把 // 当交付文档，上线后发现什么线索都没留下。注释能不能见人，从来不是 Less 单方面决定的。
