postcss不能在html中直接配置插件，必须通过构建工具链注入；postcss.config.js失效的三大主因是：文件位置错误（须在入口文件同级或上层目录）、browserslist缺失或范围过窄、插件顺序错乱（如postcss-nested须在autoprefixer之前）。
PostCSS 不能在 HTML 中配置插件，所有插件必须通过构建工具链注入，HTML 文件只接收最终处理结果。
postcss.config.js 配置失效的三个常见原因
即使你写了 postcss.config.js，插件也大概率没生效——问题通常卡在这三处：
-
postcss.config.js文件位置不对：必须放在 Webpack 入口文件（如src/index.js）所在目录，或其任意上层目录；放在src/css/或public/下会被忽略 -
browserslist缺失或范围太窄：比如只写"last 1 chrome version"，display: flex就不会加-ms-flexbox；建议统一写在package.json里："browserslist": ["> 1%", "not dead", "IE 11"] - 插件顺序错乱：例如
postcss-nested必须排在autoprefixer前面，否则嵌套规则（如.a { .b { display: flex; } }）还没展开就被前缀插件跳过
autoprefixer 和 cssnano 的顺序与参数陷阱
这两个插件最常一起用，但顺序和参数稍有偏差就会导致样式崩溃或压缩失效：
-
autoprefixer必须在cssnano之前——否则cssnano可能误删-webkit-flex，iOS 12 下直接白屏 -
cssnano默认 preset 会启用mergeRules和sortSelectors，极易破坏伪类优先级（如a:hover被合并到a后面，覆盖失效） - IE11 项目必须显式禁用
normalizeWhitespace，否则display: -ms-flexbox可能被格式化成非法值 - 如果用了
postcss-custom-properties，得给它加preserve: true，否则变量声明会在替换前被cssnano当作无效规则删掉
想把 CSS 写进 HTML 的 style 属性？别用通用流程
目标是生成内联样式（比如邮件模板、SSR 输出），不能靠常规 PostCSS 流水线，必须走专用路径：
- 选
postcss-inline-style+postcss-html组合，且 HTML 必须是构建输入源（不是运行时 DOM） - 必须在插件配置中明确指定 HTML 入口路径和 CSS 源路径，插件靠 AST 匹配选择器并计算特异性
-
:focus、:active、@media等规则会被静默丢弃——内联样式不支持伪类和媒体查询，这不是 bug，是机制限制 - 动态插入的类名（如 JS 添加的
.is-open）无法被自动识别，需手动加/* uncss:ignore */注释或配置白名单
最容易被忽略的是：PostCSS 插件的效果完全依赖输入 CSS 的“完整性”。如果你的样式分散在多个 @import 中，又没配 postcss-import，那 autoprefixer 只会处理主文件，其他文件里的 flex 声明一个前缀都不会加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
