CSSNano压缩后样式失效主因是默认激进规则误删/改写关键代码，需禁用mergeRules、sortSelectors等选项，确保其作为PostCSS插件正确配置在postcss-loader中且顺序合理。
为什么 CSSNano 压缩后样式失效了
常见现象是：本地开发一切正常，上线后按钮没颜色、布局错乱、display: none 意外生效。这不是 bug，而是 CSSNano 默认启用了 aggressive 的转换规则，比如把 background-color: transparent 简化成 background-color: 0（部分老浏览器不认），或合并看似重复的 @media 查询却误删了带 JS 动态 class 的关键选择器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先关掉所有 preset，用最简配置跑一次：
{ preset: 'default' }→ 改成{ preset: ['default', { mergeLonghand: false, discardComments: { removeAll: true } }] } - 检查是否用了
postcss-custom-properties等插件——CSSNano 会提前处理自定义属性，导致变量未被替换就压缩，加preserve: true到对应插件配置里 - 若项目含 IE11 兼容需求，必须禁用
normalizeWhitespace和reduceTransforms，这两项在旧引擎里易触发渲染异常
Webpack 中 CSSNano 配置位置不对，根本没生效
很多人把 CSSNano 当成独立 loader 写在 module.rules 里，结果发现压缩前后文件体积一模一样。问题在于：它不是 loader，是 PostCSS 插件，必须塞进 postcss-loader 的 postcssOptions.plugins 数组里，且顺序必须在 css-loader 之后、mini-css-extract-plugin 之前。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认
postcss-loader版本 ≥ 6.0，低版本用options.plugins，新版必须用postcssOptions.plugins - 不要在
postcss.config.js里直接 require('cssnano')，Webpack 5+ 的 tree-shaking 可能把它整个干掉；改用require('cssnano')({ preset: 'default' }) - 加个临时
console.log到插件函数体里，验证是否真被调用（别只看配置写了没）
压缩后伪类顺序错乱，:hover 样式覆盖不了 :focus
CSSNano 的 sortSelectors 和 mergeRules 会重排规则顺序，而浏览器对伪类级联（如 a:hover:focus）极度敏感——原本靠书写顺序保证的层叠优先级，压缩后可能变成 a:focus:hover，导致焦点态样式被 hover 覆盖。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 明确禁用这两项：
{ mergeRules: false, sortSelectors: false } - 如果必须合并规则，用
mergeLonghand: true替代，它只合并同选择器下的声明块，不动伪类结构 - 检查是否有 CSS-in-JS 库（如 Emotion）动态注入样式——CSSNano 对运行时生成的 CSS 无能为力，压缩只作用于构建时静态文件
开启 parallel 后报错 “Cannot read property 'length' of undefined”
这是 CSSNano 与某些 PostCSS 插件（尤其是 postcss-preset-env）在多线程下共享 AST 导致的竞态问题，尤其出现在 Webpack 5 的 thread-loader 或 css-minimizer-webpack-plugin 的 parallel 选项开启时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 直接关掉
parallel：设为false或1，压缩慢点但稳 - 若必须并行，升级到
cssnano@6.0++postcss@8.4+，并在css-minimizer-webpack-plugin配置中显式传入minimizerOptions，避免插件自动推导出错 - 别信“加个 try-catch 就行”的说法——这个错误本质是 AST 被并发修改，catch 住也救不回样式逻辑
真正麻烦的是那些没报错但渲染异常的 case：比如 calc() 里单位混用被强制转成像素、rem 在根字体变化前就被压缩成固定值。这些不会抛错，得靠视觉回归测试卡住。
