cssnano默认preset启用mergerules和sortselectors会重排伪类、合并选择器，导致:hover覆盖:focus或动态类失效；修复需禁用这两项及reducetransforms，并确保autoprefixer在cssnano前、postcss-import已配置、html引用压缩后文件。
cssnano 启用了危险的合并与排序规则
默认 preset: 'default' 会开启 mergeRules 和 sortSelectors，它们不光删空格，还会重排伪类顺序、合并“看起来一样”的选择器。比如把 a:hover 和 a:focus 合并成一条规则，结果 :focus 的样式被 :hover 覆盖；又或者把动态插入的 .is-active 规则和静态 .btn 合并，导致 JS 切换状态失效。
常见现象：按钮悬停没反应、Tab 键聚焦失焦、下拉菜单点不开、主题切换后颜色错乱。
- 紧急修复：把配置改成
{ preset: ['default', { mergeRules: false, sortSelectors: false, reduceTransforms: false }] } - IE11 项目必须关掉
normalizeWhitespace，否则display: -ms-flexbox可能被格式化成非法值 - 用了
postcss-custom-properties？得加preserve: true，否则变量还没替换就被当成无效声明删了
autoprefixer 和 cssnano 的顺序反了
PostCSS 插件执行顺序很关键。autoprefixer 必须在 cssnano 之前——如果反过来，cssnano 会先把 display: flex 压缩掉，autoprefixer 就没机会补 -webkit-flex，iOS 12 下直接布局崩溃。
Webpack 中检查 postcss-loader 的 postcssOptions.plugins 数组，确保 require('autoprefixer') 出现在 require('cssnano')(...) 前面。
- 错误写法：
[cssnano(), autoprefixer()] - 正确写法：
[autoprefixer(), cssnano({ preset: [...] })] - Vite 用户注意：
css.postcss.options.plugins也是同样顺序要求
源 CSS 没经过完整解析就进压缩流程
cssnano 是静态分析工具，它只处理传给它的那一块 CSS 字符串。如果你的样式分散在多个 @import 文件里，又没配 postcss-import，那它看到的只是主文件里几行 @import，根本不知道后续规则长什么样，压缩时就会漏掉依赖、误删“看似冗余”的声明。
更隐蔽的问题是：SCSS/Less 编译后才进 PostCSS 链路，但有些构建配置把 postcss-loader 放在 scss-loader 前面，导致 cssnano 处理的是未编译的语法，直接报错或静默跳过。
- Webpack 中确认 loader 顺序：
scss-loader→postcss-loader（含cssnano）→MiniCssExtractPlugin.loader - 检查
postcss.config.js是否导出函数，且能读取到所有@import路径 - 单文件组件（.vue）里
<style></style>标签的lang="scss"必须对应 loader 链路完整
HTML 还在引用未压缩的原始 CSS 文件
cssnano 不在浏览器里运行，它只输出一个新文件。如果你 HTML 中写的还是 <link href="main.css">，而构建产物其实是 main.8a3f2d.css，那页面加载的压根不是压缩后的版本——所有压缩带来的风险和收益都不存在，错乱纯属巧合或另有原因。
常见于用 postcss-cli 手动处理单个文件后，忘了改 HTML 中的路径；或 Webpack 中 MiniCssExtractPlugin 输出名和 HTML 引用名不一致。
- 构建后检查 dist 目录，确认 CSS 文件名和哈希是否匹配
- 打开浏览器开发者工具 → Network → 点开 CSS 请求 → 查看响应内容是否含压缩特征（如无换行、无空格、类名被缩短）
- Vue CLI 项目需确认
public/index.html或html-webpack-plugin注入的链接是否动态生成
cssnano，其实它被 loader 顺序挡在外面；你以为样式全进了 PostCSS，其实 @import 被跳过了；你以为 HTML 加载的是压缩版，其实路径还指着源文件。查问题得一层层剥，不能只盯着 cssnano 配置本身。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
