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