<p>Less本身不删除/ /注释,是否保留在生产CSS中取决于CSS压缩器配置;若css-minimizer-webpack-plugin的preserveComments设为true或正则匹配不当,或Vite中cssnanoOptions.removeComments设为false,注释就会残留。</p>

Less 注释出现在生产环境 CSS 里,基本只有一种情况:你写了 /* */ 块注释,但压缩工具没删它——这不是“错误保留”,而是配置漏了或正则写错了。
为什么 /* */ 注释会留在生产 CSS 里
Less 本身不删 /* */,它原样透传;真正该删它的环节是 CSS 压缩器(比如 css-minimizer-webpack-plugin 或 cssnano)。如果这些工具没配好,注释就直接进线上文件。
-
css-minimizer-webpack-plugin默认preserveComments: false,但如果你手动设了true或正则白名单,它就会留 - Vite 默认用
cssnanov5+,其removeComments默认为true,但若你在vite.config.ts里显式开了cssnanoOptions.removeComments = false,注释就全留 - 写了
/*! important */这种感叹号注释?它本意就是“别删”,而 Less 不支持这种语法,但压缩器会照单全收——哪怕你只是手误多打了个!
怎么确认是哪个环节放过了注释
别猜,直接查构建产物和配置链路:
- 运行构建后,打开生成的
dist/style.css,搜/*看是否真存在;如果不存在,说明压缩器生效了,问题不在它 - 检查 Webpack 配置中
css-minimizer-webpack-plugin的minimizerOptions,重点看preserveComments字段值 - Vite 项目搜
cssnanoOptions或esbuild相关 CSS 压缩配置;注意cssnanov5+ 不再认safe: true,得用removeComments: false或正则 - 执行
npx lessc --version和npx webpack --version,确认不是旧版lessc(v3.x)把未引用变量连带注释一起优化掉了,造成“看似保留实为残留”
如何精准控制哪些注释该留、哪些该删
硬删所有注释太粗暴,上线要留版权、版本、许可证信息;但调试用的 /* debug: true */ 必须消失。靠正则白名单最稳:
立即学习“前端免费学习笔记(深入)”;
- Webpack 中配:
preserveComments: /Copyright|@license|v\d+\.\d+\.\d+/—— 只留含版权、许可证或语义化版本号的注释 - Vite 中在
vite.config.ts写:cssnanoOptions: { preset: ['default', { discardComments: { removeAllBut: /Copyright|v\d+\.\d+\.\d+/ } }] } - 避免用
/./或true这类全量保留,否则/* TODO: refactor */也会进线上包 - Less 源里别写孤立的
/* v@{version} */,@{version}若没被任何属性实际引用,旧版lessc会把它整个优化掉,导致白名单失效
注释能不能进生产环境,从来不是 Less 决定的;关键在压缩器是否收到明确指令。最容易被忽略的是:你以为配了白名单,其实正则没生效——因为大小写没对上(copyright vs Copyright),或者路径里混进了空格和不可见字符。


















