CSSNano压缩后样式失效的主因是默认激进策略误合并、误删规则及重命名CSS变量，解决需禁用mergeLonghand、discardDuplicates、reduceIdents等高风险选项并升级至v5+适配PostCSS 8。
为什么CSSNano压缩后样式失效了
常见现象是压缩完的CSS里:hover、@media规则消失，或者background简写被错误合并。根本原因是CSSNano默认启用 aggressive 合并策略，比如把.a{color:red}.b{color:red}合成.a,.b{color:red}，但若原CSS里.a和.b在不同scope（如Shadow DOM或CSS Modules生成的哈希类名）下，合并后就会错配。
- 默认开启
mergeLonghand，会把margin: 0 10px和margin-top: 5px强行合并，导致冲突 -
discardDuplicates会删掉重复声明，但BEM中.btn--primary和.btn.is-primary可能被误判为重复 - 解决办法：禁用高风险选项，例如在
postcss.config.js中显式配置{ mergeLonghand: false, discardDuplicates: false }
PostCSS配置里CSSNano版本不匹配导致报错
PostCSS 8+ 需要 CSSNano 5+，但很多旧项目还在用cssnano@4，会抛出TypeError: plugin is not a function。这是因为CSSNano 4导出的是对象，而PostCSS 8只接受函数式插件。
- 检查
package.json中cssnano版本：npm list cssnano，若显示4.x，必须升级 - 升级命令：
npm install cssnano@latest --save-dev，新版已内置postcsspeer 依赖 - 配置写法也要改：旧版
require('cssnano')({ preset: 'default' })→ 新版直接require('cssnano')，preset已默认集成
如何保留关键CSS注释不被CSSNano删除
CSSNano默认删掉所有/* */注释，但有些注释是运行时必需的，比如/*! license */或/* purgecss start ignore */这类标记。
- 启用
comment选项可保留特定注释：{ comment: { preserve: /^!/ } }，这样/*! */会留下，普通/* */仍被清除 - 若用PurgeCSS，需配合
/* purgecss start ignore */等指令，这些必须被保留，否则PurgeCSS无法识别边界 - 注意：不要用
preserve: /./全量保留，会导致压缩率下降15%~20%，实测dist.css体积明显增大
压缩后CSS变量（--xxx）被重命名或丢失
CSSNano默认启用reduceIdents，会把--theme-color这种自定义属性名也当作可替换标识符处理，尤其在camelCase或lowercase类名存在时容易误伤。
立即学习“前端免费学习笔记（深入）”；
- 自定义属性名不会被重命名，但若你写了
div{ --color: red; color: var(--color) }，CSSNano可能把var(--color)简化成red，然后删掉--color声明——这在动态主题切换场景下就是致命问题 - 关闭
reduceIdents和normalizeWhitespace（后者可能删掉var(--x)周围的空格，导致IE11解析失败） - 推荐最小安全配置：
{ reduceIdents: false, normalizeWhitespace: false, preset: ['default', { cssDeclarationSorter: false }] }
真正难处理的是嵌套作用域里的CSS变量继承链，比如:root{--c:#000} .dark{--c:#fff} p{color:var(--c)}，压缩时不能假设--c全局唯一。这点很多人在做暗色模式时才踩到坑，得靠手动加/* rtl:ignore */或拆分文件规避。
