PostCSS编译失败主因是命令未加载：先确认Node.js≥18并运行node -v、npm -v；再全局安装postcss-cli和autoprefixer；最后验证postcss --version与autoprefixer --version均成功返回版本号。
PostCSS 编译失败，90% 是因为命令行根本没加载到插件链——不是配置写错了，是压根没跑起来。
postcss --version 报 command not found 怎么办
这是最底层的信号：Sublime、Vite、Webpack 全部失效的共同起点。编辑器或构建工具调用的是系统 shell 命令，如果 postcss 连命令都找不到，后续一切配置都是空中楼阁。
- 先确认 Node.js 已安装且版本 ≥18：
node -v和npm -v都得有输出 - 全局安装（推荐）：
npm install -g postcss-cli autoprefixer；项目级安装则用npm install --save-dev postcss-cli autoprefixer - Windows 用户若在 PowerShell 报错“拒绝访问”，请换管理员身份运行终端；macOS/Linux 出现
permission denied时，别加sudo，改用nvm管理 Node 更安全 - 装完立刻验证：
postcss --version和autoprefixer --version必须都成功返回版本号，缺一不可
postcss.config.js 文件位置和内容对不对
PostCSS 只会在入口文件（如 src/index.js 或 vite.config.ts）所在目录或其任意上层目录查找 postcss.config.js。放在 src/css/ 或 public/ 下会被完全忽略。
- 文件名必须是
postcss.config.js（或postcss.config.cjs），不能是postcss.config.json或其他变体 - 内容至少要导出插件对象，例如：
module.exports = { plugins: [require('autoprefixer')] }; - 如果用了
postcss-preset-env，它必须排在autoprefixer前面；postcss-nesting（非postcss-nested）也必须前置，否则嵌套规则不展开就进了前缀处理阶段 - Vite +
@tailwindcss/vite项目可直接删掉postcss.config.cjs，手动配反而干扰自动注入
构建工具里 loader 顺序和匹配规则漏了 .less/.scss
PostCSS 不会自动处理所有后缀。Webpack/Vite 默认只给 .css 配了 postcss-loader，而 .less 或 .scss 文件若没显式覆盖规则，就会跳过 PostCSS 阶段，直接交给对应预处理器输出原始 CSS —— 此时 @apply、display: flex 等全都不会加前缀，甚至报 ParseError: Unrecognised input。
立即学习“前端免费学习笔记（深入）”；
- Webpack 中检查
module.rules是否为.less单独写了 rule，且use数组顺序是：['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] -
postcss-loader拼写必须一字不差，不能是postcss-load或post-css-loader - Vite 用户需确保
css.postcss.plugins数组已声明，并在preprocessorOptions.less中正确设置paths映射中文路径 - Less 文件含零宽空格（U+200B）或 BOM 头？这类不可见字符会让 PostCSS 在词法分析阶段直接报错，VS Code 开启“显示不可见字符”即可定位
Autoprefixer 不加前缀或加错，其实是 browserslist 没生效
Autoprefixer 是否插入 -webkit-、-ms- 等前缀，完全取决于 browserslist 输出的目标浏览器范围。写错位置、格式或范围太窄，都会导致该加的不加、不该加的乱加。
- 不要把
browserslist塞进package.json—— Webpack/Vite 的内部解析常会忽略它；应单独建.browserslistrc文件，内容如：> 1%、not dead、IE 11 - 运行
npx browserslist查看实际生效的浏览器列表；若含 IE 11，gap就不会降级，但display: flex会补-ms-flexbox - 旧配置里的
browsers字段已废弃，必须换成overrideBrowserslist或直接删掉，改用.browserslistrc - Tailwind v3.3+ 要求类名被
content字段扫描到，否则@apply bg-blue-500会报Cannot apply unknown utility class，这不是 PostCSS 错误，但表现像
最容易被忽略的是：PostCSS 插件的效果高度依赖输入 CSS 的“完整性”。分散在多个 @import 中的样式，若没配 postcss-import，autoprefixer 就只处理主文件 —— 其他文件里的 flex 声明一个前缀都不会加。
