postcss-combine-media-query没生效是因为它只处理顶层无嵌套的@media规则，而less/sass若保留嵌套写法（如.component {@media...{}}）则被跳过；需确保编译后@media位于顶层、条件字符串完全一致，并在postcss.config.js中正确配置且置于cssnano之前。
postcss-combine-media-query 为什么没生效？
它只处理顶层 @media，且要求 CSS 已“展平”——即不能有嵌套结构。Less/Sass 编译后若保留 .card { @media (min-width: 768px) { ... } } 这种写法，插件直接跳过。常见现象是：跑完 PostCSS，控制台没报错，但源码里重复的 @media (min-width: 768px) 依然各自为政。
验证方法：在 postcss.config.js 中临时加 require('postcss-reporter')({ plugins: ['combine-media-query'] })，或用 console.log 打印 result.css，确认输入 CSS 中的 @media 是否已处于顶层、无嵌套、条件字符串完全一致（注意空格、单位、括号格式）。
Less 里怎么写出能被合并的媒体查询？
别在组件级文件里手写 @media。统一用变量 + 单层 mixin 控制断点：
-
@md: 768px;定义断点值，所有地方引用同一变量 - 写
.media-md() { @media (min-width: @md) { &:extend(.reset all); } }这类不嵌套的 mixin - 在组件中调用
.media-md() { color: red; }，而非& { @media (min-width: 768px) { color: red; } } - 确保所有
@import "mixins.less"加(once)，避免同一 mixin 被多次展开
这样编译后，所有 @media (min-width: 768px) 都是独立顶层规则，内容可被插件识别并合并。
webpack / vue-cli 中启用合并插件的关键配置点
不是装上就自动工作。必须满足三个硬性条件：
-
postcss-combine-media-query必须出现在postcss.config.js的plugins数组中，且排在cssnano和css-minimizer-webpack-plugin之前 - Vue CLI 项目默认不启用该插件，需手动在
postcss.config.js中显式写入：module.exports = { plugins: [require('postcss-combine-media-query'), require('cssnano')] }; - 若用
css-minimizer-webpack-plugin，禁用其内置的mergeLonghand（可能误改媒体查询内 border 等简写），并在插件选项中设minify: cssnano而非重复加载
否则压缩阶段会先破坏结构，再交给合并插件——等于白配。
合并后样式顺序乱了？先查 clean-css 或 cssnano 配置
合并本身不改变层叠顺序：@media (min-width: 768px) { .a { color: red; } } 和 @media (min-width: 768px) { .b { color: blue; } } 合并为一个块，等价于你手写的结果。
但以下配置会让结果不可控：
-
clean-css开启--skip-selectors-merging：媒体查询内部的选择器不会去重，导致看似合并了，实际仍冗余 -
cssnano配置discardComments: { removeAll: true }：如果靠注释标记断点边界（如/* md-start */），调试时根本找不到来源 -
postcss-preset-env开启stage: 4且含nesting，可能把原本展平的结构又转回嵌套语法
最常被忽略的是：你以为的“重复媒体查询”，其实是 Less 多次 @import 导致的逻辑复制——这得翻源码查导入链，PostCSS 插件救不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
