less不合并@media，必须依赖postcss或grunt插件在编译后处理；前提是@media为顶层扁平结构，需统一用变量和单层mixin控制断点，避免重复导入与嵌套，并确保插件执行顺序正确且作用于已编译css。
Less 本身不合并 @media 块，无论条件是否重复、内容是否一致，都会原样输出。想真正合并，必须靠编译后环节的 PostCSS 或 Grunt 插件，且前提是 CSS 中的 @media 是顶层扁平结构。
为什么 Less 编译后仍有重复的 @media (min-width: 768px)
Less 只做语法展开，不做语义分析。你在 _button.less 和 _card.less 里各写一次 .btn { @media (min-width: 768px) { ... } }，编译后就是两段独立的 @media (min-width: 768px) 块——这不是 bug，是设计如此。
- 所有公共断点必须用变量定义，例如
@md: 768px;，不能硬编码在每个@media里 - 避免多个文件各自
@import "mixins.less"却没加(once)，否则同一套@media逻辑被复制多次 - 检查
@import路径是否真正“相同”：./mixins和../shared/mixins在 Less 看来是两个文件，(once)不生效
PostCSS 合并 @media 的前提：必须展平
postcss-combine-media-query 这类插件只处理顶层 @media，遇到嵌套就跳过。如果你在 Less 里写了：
.card {
@media (min-width: 768px) {
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
}
编译后仍是嵌套结构，插件直接忽略。
- 所有断点逻辑统一用单层
.media-md()mixin 控制，禁止@media套@media - 用
postcss-reporter或临时console.log打印 PostCSS 输入 CSS，确认@media已全部位于顶层 - Vue CLI / CRA 默认禁用该插件，需在
postcss.config.js中显式启用
Grunt 配置容易错在路径和顺序
grunt-combine-media-queries 能合并，但它不读 .less，只处理已编译的 CSS 文件。
-
files字段必须指向dist/css/*.css这类编译后路径，不能写src/**/*.less - 通配符要精确：
dist/css/*.css比dist/**.css更安全，后者可能匹配到.map或临时文件 - 任务必须放在
cssmin之前，否则压缩后的 CSS 已无结构可识别
压缩工具可能悄悄破坏合并结果
合并本身不会改变层叠顺序，但后续压缩环节可能引入新问题：
-
clean-css若开启--skip-selectors-merging，会跳过媒体查询内选择器合并，导致冗余残留 -
cssnano若配置discardComments: { removeAll: true }，可能删掉用于标记断点边界的/*! */注释，调试困难 -
css-minimizer-webpack-plugin若启用mergeLonghand，可能误改border等简写属性，间接影响媒体查询内样式表现
最常被忽略的一点：你以为的“重复”，其实根本不是 @media 本身，而是 Less 源码里多个文件重复导入同一套断点逻辑——这得回 @import 链查，PostCSS 解决不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
