Less不合并@media，需PostCSS或Grunt插件；PostCSS合并要求媒体查询扁平化，嵌套@media会被跳过；Grunt配置须指向编译后CSS且顺序正确；clean-css等压缩工具可能干扰合并效果。
Less本身不合并@media，必须靠PostCSS或Grunt插件
Less编译器只负责把嵌套的 @media 块原样展开成标准 CSS，不会识别、去重或合并相同条件的媒体查询。比如你在两个不同组件里都写了 .media-md() { @media (min-width: 768px) { color: red; } }，Less 就会输出两段完全独立的 @media (min-width: 768px)，哪怕内容一模一样。
真正能合并的，是 PostCSS 插件（如 postcss-combine-media-query）或 Grunt/Gulp 插件（如 grunt-combine-media-queries），它们工作在 Less 编译之后、CSS 输出之前。
- PostCSS 方案更主流：Webpack 中配
postcss-loader+postcss-combine-media-query，确保它在cssnano或clean-css之前执行 - Grunt 方案需注意顺序：
grunt-contrib-cssmin默认不合并媒体查询，必须显式加grunt-combine-media-queries任务，且放在 cssmin 之前 - 别指望
lessc --compress能合并 —— 它只删空格和分号，对重复@media完全无感
为什么Less嵌套的@media无法被PostCSS合并
PostCSS 合并的前提是：输入 CSS 必须是“扁平结构”，即所有 @media 都是顶层规则，不能嵌套在其他 @media 内部。而 Less 允许写：
.card {
@media (min-width: 768px) {
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
}
这种嵌套会被 Less 编译成嵌套的 @media，而 postcss-combine-media-query 明确声明不处理嵌套媒体查询 —— 它直接跳过。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：在 Less 里避免
@media套@media，所有断点逻辑用变量 + 单层.media-sm()Mixin 控制 - 检查中间产物：用
postcss-reporter或临时写console.log打印 PostCSS 输入 CSS，确认是否已展平 - 如果用了 Vue CLI 或 Create React App，确认其默认 PostCSS 配置没禁用该插件（有些脚手架默认关掉了非必要优化）
Grunt-combine-media-queries 配置踩坑点
这个插件能合并同条件媒体查询，但路径和执行时机错一点就失效。常见错误不是插件坏了，而是配置没对上。
-
files必须指向已编译好的 CSS 文件，不是 .less 源码；若你配了'src/*.less'，它会报错找不到文件 - 路径通配符要明确：写
'dist/css/*.css'比'dist/**.css'更安全，后者可能匹配到 sourcemap 或临时文件 - 合并后顺序依赖原始 CSS 的书写顺序 —— 如果 A.css 里先写
@media (min-width: 768px) { .x {} }，B.css 里后写同条件规则，合并结果中.x一定在前面，层叠顺序不变 - 插件不改选择器权重，只拼
{}体；所以不用担心合并后样式被意外覆盖
合并后体积没变小？检查 clean-css 是否干扰
很多人开了合并插件却没看到 CSS 体积下降，问题常出在压缩工具身上。因为 clean-css 在某些模式下会“反向拆分”已合并的媒体查询。
- 禁用
--skip-imports：它会让clean-css把@import规则提前，打乱媒体查询位置，导致合并失效 - 慎用
--selectors-merge-mode=ie8：这个参数强制保留原始顺序，但可能让 PostCSS 合并后的块被再次切开 - 推荐组合：
postcss-combine-media-query→cssnano（带mergeLonghand: true）→ 最后clean-css --level 2，不加额外 flag
最易被忽略的是：合并只对“完全相同的媒体查询字符串”生效。写 @media (min-width: 768px) 和 @media (min-width: 768px )（多一个空格）会被视为不同条件，不会合并 —— 所以统一用 Less 变量生成，别手写数字。
