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 怎么删”，而是“谁在引用它”。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 把组件级样式拆成独立 .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 搅在一起——这时候与其调参数，不如先理清依赖图。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！