如何在postcss.config.js中配置引入插件实现css预处理？

本文共计1094个文字，预计阅读时间需要5分钟。

PostCSS 本身不提供任何预处理功能，所谓引入插件功能本质上是加载并执行第三方插件对 CSS AST 的修改逻辑——即不安装插件、配置错误或环境不支持，那么 `postcss.config.js` 就仅仅是一个空文件。

postcss.config.js 文件根本没生效？先确认构建工具是否真读它

不是所有前端工具链都会自动加载 postcss.config.js。Create React App（CRA）v5+ 虽内置 PostCSS 8，但完全忽略项目根目录下的 postcss.config.js，只用自己硬编码的插件列表（autoprefixer + postcss-preset-env）。你写了 @apply 报错、color-mix() 不转译，大概率就是这个原因。

• 用 CRA：别白写 postcss.config.js，要么 eject，要么迁到 Vite/Next.js
• 用 Vite：默认读取 postcss.config.js，且会合并内置配置（优先级更高）
• 用 Webpack：必须配 postcss-loader，并在 loader.options.config 或 postcss.config.js 中显式指定路径

插件安装后仍不工作？检查三个硬性依赖条件

PostCSS 插件不是 npm install 就完事。