Less编译压缩需区分--compress（内置简易压缩）和--clean-css（需额外安装，深度优化）；后者可能因sourcemap、注释或选择器合并导致体积增大或样式错位，应配合--remove-source-maps、--compatibility '*'等参数调整。
Less编译时怎么开启压缩输出
默认情况下 lessc 编译不压缩，生成的是带缩进、换行、空格的可读CSS。要减小体积，必须显式启用压缩——但注意，--clean-css 和 --compress 不是等价的。
-
--compress是内置简易压缩：删空格换行、合并重复分号，不处理选择器或声明去重，兼容性好，适合开发阶段快速瘦身 -
--clean-css需额外安装clean-css（npm install -g clean-css-cli），支持选择器合并、单位简化、颜色转简写等深度优化，但可能误删某些依赖空格的 hack（比如*display: inline） - CI/CD 中建议用
--clean-css，本地调试用--compress更稳妥
为什么用了 --clean-css 文件反而变大了
常见于开启了 --sourcemap 或输入文件本身含大量注释/空行——clean-css 默认保留部分注释（如 /*! ... */），且 sourcemap 会附在 CSS 底部，导致体积激增。
- 加
--no-rebase和--remove-source-maps参数禁用 sourcemap 注入 - 用
--skip-imports跳过 @import 内联（避免重复引入相同变量文件） - 检查 Less 源里是否混有未被条件编译覆盖的
//行注释——它们会被clean-css当作普通文本保留
如何让 Less 只编译用到的样式（Tree Shaking）
Less 本身不支持 Tree Shaking，但可通过模块化 + 构建工具间接实现。关键不是“Less 怎么删”，而是“谁在引用它”。
- 把组件级样式拆成独立
.less文件（如button.less、modal.less），不在全局index.less中一次性@import全部 - Webpack 中用
mini-css-extract-plugin+css-loader的exportOnlyLocals: true配合 JS 动态 import，确保未引用的样式不会进入最终 bundle - 警惕
@import (reference)：它只提供变量/mixin，不输出 CSS，但一旦在某处调用了该 mixin，对应样式就会展开——所以没调用的 mixin 才算真正“未使用”
clean-css 压缩后样式错位或伪元素失效
典型表现是 ::before 内容消失、background-position 偏移、或媒体查询断点错乱。根本原因是 clean-css 合并规则时破坏了原本的层叠顺序或属性优先级。
立即学习“前端免费学习笔记（深入）”；
- 加
--compatibility '*'强制兼容旧语法（尤其 IE8+ 场景） - 禁用选择器合并：
--selectors-merge-mode=ie8或直接--skip-selectors-merging - 如果用了
calc()，确保 Less 编译后保留括号空格（如calc(100% - 20px)），clean-css默认会删 calc 内空格，导致 Safari 旧版解析失败
真正难处理的不是压缩本身，而是当多个团队共用同一套 Less 变量库、又各自维护不同主题文件时，@import 链路一深，压缩就容易把本该隔离的 scope 搅在一起——这时候与其调参数，不如先理清依赖图。
