Less本身不支持混淆，所谓“混淆”实为概念误用；压缩可用lessc配合--compress或--clean-css实现，但二者本质不同：--compress仅删空格换行，保留结构；--clean-css则合并选择器、简化单位、转简写色值，可能破坏hack或层叠顺序，且不改类名、不编码字符串，调试困难，需搭配css-loader modules等工具链实现真混淆。
Less 本身不支持混淆，所谓“混淆”其实是误用概念；压缩可用 lessc 配合插件实现，但必须分清场景和副作用。
lessc --compress 和 --clean-css 的本质区别
--compress 是 lessc 内置的轻量压缩：只删空格、换行、重复分号，保留所有选择器结构和注释（除 // 行注释），兼容性高，适合本地快速构建。
--clean-css 是外部工具链，需单独安装 clean-css-cli，它会合并选择器、简化单位（如 0px → 0）、转简写色值（#ff0000 → #f00），但也可能破坏依赖空格的 hack（如 *display: inline）或层叠顺序。
- 不要把
--clean-css当作“混淆”——它不改类名、不编码字符串、不打乱属性顺序 -
--compress输出仍是可读 CSS；--clean-css输出不可逆，调试困难 - CI/CD 推荐
--clean-css，但必须加--remove-source-maps防止 sourcemap 拖累体积
为什么加了 --clean-css 后 CSS 体积反而变大？
常见原因不是插件失效，而是默认行为与预期冲突：
立即学习“前端免费学习笔记（深入）”；
-
@import多次引入同一文件，--clean-css不去重，导致样式重复叠加 - 源 Less 中有大量
/*! ... */注释，clean-css默认保留它们 - 启用了
--sourcemap，生成的 base64 sourcemap 直接附在 CSS 底部，体积激增 - 输入 Less 含大量空行或长空格缩进，
--compress能压掉，但--clean-css在某些模式下反而因解析开销略增体积
修复命令示例：lessc input.less output.css --clean-css="--skip-imports --remove-source-maps --compatibility '*'"
如何避免压缩后伪元素或媒体查询错位？
根本原因是 clean-css 合并规则时未严格保持原始层叠上下文。典型表现：::before 内容消失、background-position 偏移、断点在移动端失效。
- 禁用选择器合并：
--selectors-merge-mode=none - 关闭单位简化：
--optimizations.level.1.selectors.optimize=false - 对含
@supports或复杂嵌套的 Less 文件，优先用--compress而非--clean-css - 若必须用
--clean-css，建议在构建后人工 diff 压缩前后 CSS，重点检查::before、@media、@keyframes区块
真正需要“混淆”的场景该怎么做？
Less 编译阶段无法做类名混淆（CSS class 名混淆属于构建时 CSS-in-JS 或 PostCSS 范畴）。如果你的目标是防止样式被轻易复用或识别：
- 用 Webpack +
css-loader开启modules: true，让类名自动哈希化（如.button → .Button_component__abc123） - 配合
mini-css-extract-plugin提取 CSS，并用css-minimizer-webpack-plugin压缩 - 不要指望
less-plugin-clean或lessc --clean-css改类名——它们只处理 CSS 文本内容，不分析 DOM 关联
混淆不是压缩的自然延伸，它是独立需求，得换工具链解决。强行在 Less 编译环节加“混淆”参数，只会白忙活还埋坑。
