如何在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 就完事。每个插件都有隐含前提，缺一不可：

• postcss-preset-env 需要 .browserslistrc 或 package.json#browserslist 字段，否则无法推导哪些特性该降级（比如写了 stage: 4 却没配 browserslist，accent-color 可能直接被跳过）
• tailwindcss 插件会静默失败：如果项目里没有 tailwind.config.js，它不会报错，但所有 @tailwind 规则都不处理
• postcss-custom-properties 和 postcss-calc 必须按顺序加载：前者必须在后者之前，否则 calc(var(--gap) * 2) 里的 var() 还没替换，calc() 就没法算

为什么 @import 不起作用？插件顺序错了是最常见原因

postcss-import 是唯一能真正解析 @import 语句并内联内容的插件，但它必须放在插件数组第一位。一旦顺序错，后面插件（比如 postcss-nested）看到的就是原始的 @import "xxx.css" 字符串，而不是导入后的完整 CSS 树。

立即学习“前端免费学习笔记（深入）”；

• 正确顺序：postcss-import → postcss-nested → postcss-preset-env → autoprefixer → cssnano（生产）
• 错误示例：autoprefixer 放第一位，@import 后的规则压根没被解析，前缀自然加不上
• Vite 用户注意：postcss.config.js 是 CommonJS 格式，不能用 export default，必须写 module.exports = { plugins: [...] }

自定义属性（--var）和 postcss-preset-env 冲突？关键在 preserve 配置

当 postcss-preset-env 和 tailwindcss 共存时，CSS 变量容易被提前展开，导致 Tailwind 的运行时计算失效。例如 hsl(from var(--primary), 70%, 60%) 被 postcss-preset-env 直接转成无效字符串，而不是留给浏览器执行。

• 解决方案：在 postcss-preset-env 配置中加 { preserve: true, stage: 3 }，禁用变量内联
• 同时确保 tailwindcss 插件排在 postcss-preset-env 之后，让变量保持原样传递给 Tailwind
• 验证方法：在 CSS 里写 div { color: var(--missing-var, red); }，编译后仍是 var(--missing-var, red)，说明变量没被提前吃掉；如果变成 red 或报错，就是 preserve: false 或顺序问题

最容易被忽略的是：插件之间没有报错不等于它们协同工作了。一个 postcss.config.js 文件里插件全齐，但顺序错、环境不读、或依赖缺失，结果就是 CSS 看似编译成功，实际新语法没转、变量没算、@import 没合并——得逐层验证每一步 AST 是否被真实修改。