lessc 直接拼接多个 .less 文件会因路径解析失败、作用域错乱而编译出错；必须由构建工具（如 Webpack、Gulp）接管合并与压缩，配合 clean-css 深度优化并严格验证。
直接用 lessc 命令拼接多个 .less 文件再压缩，大概率会出错——它不处理 @import 路径解析、不自动去重、也不管变量作用域。真正可控的方案是让构建工具接管合并与压缩，而不是靠手工串联命令。
Less 文件合并必须由构建工具完成，不能靠 shell 拼接
很多人试过 cat a.less b.less | lessc > all.css，结果编译失败或样式错乱。根本原因是：@import 里的相对路径（比如 @import "../vars/colors.less"）在拼接后失去上下文，lessc 无法定位；变量和 mixin 的作用域也因顺序错乱而失效。
- Webpack 中用
MiniCssExtractPlugin+css-loader，入口.less文件里@import其他文件，构建时自动解析并合并为单个 CSS - Gulp 中用
gulp-less+gulp-concat，但必须确保concat在less编译之后——否则拼的是源码，不是 CSS - 禁止在
.less文件里用@import (multiple)或@import (optional)来“模拟合并”，它们不改变输出结构，只是控制导入行为
压缩必须分两层：lessc --compress 只是基础瘦身，深度压缩得靠 clean-css
--compress 只删空格换行、合并重复分号，对选择器、声明、单位、颜色简写完全不管。它快、稳、适合本地调试，但体积缩减有限。真正压体积得上 --clean-css，但它不是开箱即用：
- 先装依赖：
npm install -g clean-css-cli - 禁用 sourcemap：
lessc --clean-css="--remove-source-maps --no-rebase" main.less，否则 sourcemap 附在 CSS 底部会让文件变大 - 跳过重复
@import：--clean-css="--skip-imports"，防止同一变量文件被多次内联 - 慎用
--selectors-merge-mode=ie8，默认的none更安全；如果发现伪元素或媒体查询错位，就加这个参数强制保留原始顺序
Tree Shaking 不是 Less 的事，是模块引用链的事
Less 本身没有静态分析能力，所谓“只编译用到的样式”，实际取决于你 JS 里怎么 import、Webpack 怎么做依赖图。关键动作不在 Less 语法里，而在构建配置中：
- 把每个组件样式拆成独立
button.less、modal.less，全局index.less里不要@import全部 - JS 中用动态
import('./button.less')，配合css-loader的exportOnlyLocals: true，未被引用的样式就不会进 bundle -
@import (reference)是安全的，它只提供变量/mixin，不输出 CSS；但只要某处调用了该 mixin，对应样式就会展开——所以“没调用”才是真正的未使用
合并后样式错位？先查层叠顺序和 calc() 空格
压缩导致 ::before 消失、background-position 偏移、断点错乱，90% 是因为 clean-css 合并规则时打乱了原始顺序，或删掉了 calc() 里的必要空格。
- 加
--compatibility '*'强制兼容旧语法，尤其当项目还要支持 IE8+ 时 - 禁用选择器合并：
--skip-selectors-merging，避免.a { color:red } .b { color:red }被合为.a,.b { color:red }后优先级变化 - 检查
calc(100% - 20px)是否被压成calc(100%-20px)——Safari 旧版会解析失败，用--preserve-urls或手动加空格规避
最常被忽略的点：压缩不是终点，而是验证起点。每次开启新压缩参数，必须跑视觉回归测试——特别是带伪元素、多背景图、calc() 和媒体查询的组件，光看文件大小没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
