PostCSS不能在HTML中直接运行，因为它是一个基于Node.js的构建时工具，需通过Webpack/Vite等构建工具集成，依赖AST解析和插件处理，无法在浏览器运行时生效。
PostCSS 不是直接写在 HTML 里的工具，它必须走构建流程；想靠 <link> 或 <style> 标签让 PostCSS 生效，不可能。
PostCSS 为什么不能在 HTML 中直接运行
PostCSS 是一个基于 Node.js 的 CSS 转换平台，它需要读取原始 CSS 文件、解析成 AST、调用插件处理、再输出新 CSS。浏览器加载 HTML 时，<link rel="stylesheet"> 引入的是静态文件，没有 JS 运行环境、没有插件加载机制、也没有 AST 处理能力——它连 autoprefixer 是个函数都不知道。
常见误解是把 PostCSS 当成类似 Babel 的“运行时转译器”，但它的执行时机在构建阶段（开发时或打包时），不是页面渲染时。
- 所有 PostCSS 插件（如
autoprefixer、postcss-preset-env）都依赖 Node.js 环境和文件系统读写能力 - HTML 中的
<style>标签内容不会被任何构建工具自动捕获并喂给 PostCSS - 即使你用
postcss-cli手动处理了内联样式，结果也得手动复制粘贴回 HTML，无法自动化
正确接入方式：必须配合构建工具
你得让构建工具（Webpack/Vite/Parcel）在处理 CSS 时，把 PostCSS 插入 loader 链。例如 Webpack 中，css-loader 后面接 postcss-loader，顺序不能错。
立即学习“前端免费学习笔记（深入）”；
- Webpack 配置里，
use: ['style-loader', 'css-loader', 'postcss-loader']是典型链路；postcss-loader必须在css-loader之后（否则 CSS 还没解析完就去处理）、在style-loader之前（否则已注入 DOM 就没法改） - Vite 默认内置 PostCSS 支持，只需确保项目根目录有
postcss.config.js，且插件已安装（如npm install -D autoprefixer） - 纯 HTML 项目想用？只能用命令行：运行
npx postcss src/style.css -o dist/style.css --use autoprefixer，然后手动替换 HTML 中的引用路径
常见配置失效的三个硬性条件
即使你写了 postcss.config.js，也可能完全不生效——往往卡在这三处。
-
postcss.config.js文件位置错误：必须放在 Webpack 入口文件（如src/index.js）所在目录，或其任意上层目录；放错位置会导致postcss-loader找不到配置 -
browserslist缺失或太激进：比如只写"last 1 chrome version"，那display: flex就不会加-ms-flexbox；建议在package.json里明确写"browserslist": ["> 1%", "not dead", "IE 11"] - 插件顺序冲突：如果同时用了
postcss-nested和autoprefixer，postcss-nested必须排在autoprefixer前面；否则嵌套规则（如.a { .b { display: flex } }）还没展开，autoprefixer就跳过了
build 后前缀消失？大概率是 cssnano 在“好心办坏事”
开发环境正常、生产构建后前缀没了，这是高频问题。根本原因是 cssnano 默认启用了自己的 autoprefixer 子功能，但它用的是内置目标浏览器配置，且会主动删除它认为“冗余”的前缀（比如它觉得 -webkit-transition 没必要，就删了）。
- 解决方案一：禁用
cssnano的 autoprefixer 功能，在postcss.config.js中这样写：{ plugins: [autoprefixer, [cssnano, { preset: ['default', { autoprefixer: false }] }]] } - 解决方案二：彻底移除
cssnano，改用更可控的压缩方案（如clean-css） - 验证方法：运行
npx autoprefixer --info，看当前browserslist下哪些属性会被处理；再对比构建后 CSS，确认是否被cssnano截胡
真正难的不是配通 PostCSS，而是理解它不处理“运行时”、不接管 HTML 解析、也不替代预处理器——它只忠实地在构建流水线里做一次 AST 转换。漏掉这个前提，所有调试都会南辕北辙。
