PostCSS本身不压缩也不混淆CSS，需依赖插件实现：cssnano（v6+须显式配置preset-default）负责压缩，必须置于autoprefixer之后；postcss-obfuscator专用于混淆，需跳过:global()、@layer、工具类及SFC模块，并按构建阶段分环境启用。
PostCSS 本身不压缩也不混淆 CSS，靠插件实现；压缩用 cssnano 或 postcss-csso，混淆必须用 postcss-obfuscator 这类专用插件，二者不能混用同一配置项。
cssnano 压缩必须放在 autoprefixer 之后
常见错误是 cssnano 配在 autoprefixer 前面，导致前缀还没加就被删了，或者 @supports 规则被误删。v6+ 版本还要求显式传 cssnano-preset-default，否则会报 Invalid CSS after ""。
-
postcss.config.js中插件顺序必须是：autoprefixer→postcss-preset-env（如有）→cssnano -
cssnano启用需带参数：require('cssnano')({ preset: 'default' })，光写require('cssnano')在 v6+ 会失效 - Webpack 用户注意：
css-loader的minimize选项要关掉，否则和cssnano双重压缩，可能把rem错误转成px
postcss-obfuscator 混淆要绕过 CSS Modules 和全局样式
混淆不是无差别重命名——它会破坏 :global()、@layer、工具类（如 u-hidden、is-active）和 Vue SFC 的 <style module>。直接套用默认配置大概率让页面样式崩掉。
- Webpack 场景下，
postcss-obfuscator必须插在css-loader之后、mini-css-extract-plugin之前，否则拿不到解析后的选择器树 - 忽略规则要明确写进配置：
classIgnore: ['u-*', 'is-*', /:global\(.+\)/]，正则注意转义括号 - Vue 单文件组件里，
postcss-obfuscator默认不处理<style module>，得确认插件版本是否支持 SFC 解析（2025 年后主流版本已支持，但需开启parseSFC: true）
压缩和混淆不能共用同一个 postcss.config.js 链
开发时你要看类名调试，生产才混淆；压缩只应在构建产物阶段启用。强行把 cssnano 和 postcss-obfuscator 同时开，会导致混淆后的类名又被压缩器二次处理，生成不可预测的输出，比如 .a1b2c3 被缩成 .a，然后 JS 里引用失效。
立即学习“前端免费学习笔记（深入）”；
- 用
NODE_ENV分环境：开发时只开autoprefixer，生产时再链上cssnano和postcss-obfuscator - Vite 用户别依赖插件自动注入，要在
vite.config.ts的css.postcss里手动判断环境并拼插件数组 - 混淆插件的
classMethod: 'random'比'simple'更安全，后者可能产生重复类名，尤其在大型项目中
真正麻烦的不是装插件，而是混淆后 JS 里硬编码的类名怎么同步——postcss-obfuscator 不提供导出映射表，你得自己 hook 构建流程把混淆结果写成 JSON，再让 JS 读取。这点很容易被忽略，直到上线发现按钮点不动才回头查。
