CSS Academy · 课时

PostCSS 的作用与工作原理

Q: 「PostCSS 的作用与工作原理」这节课中我会学到什么？

了解 PostCSS 如何作为由 JavaScript 插件驱动的 CSS 转换工具工作。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解 PostCSS 如何作为由 JavaScript 插件驱动的 CSS 转换工具工作。

PostCSS 的作用与工作原理 是 CoddyKit 上的免费 CSS Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 PostCSS？

PostCSS 是一种 CSS 转换工具——它不是像 Sass 那样的语言扩展，而是一个由 JavaScript 驱动、通过插件转换标准 CSS 的处理器。它的插件架构使其具有很强的可组合性。

PostCSS 与 Sass

Sass 是一种拥有自身语言特性的预处理器。PostCSS 是一条处理标准 CSS 的转换流水线。两者可以结合使用：先由 Sass 编译，再由 PostCSS 应用进一步的转换。

PostCSS 的工作原理

PostCSS 会将 CSS 解析为 AST（抽象语法树），由插件转换 AST，然后再将其序列化回 CSS。插件可以添加、删除或修改任意 CSS 节点。

安装 PostCSS

PostCSS 最常通过 Vite、webpack 或 postcss CLI 使用：

npm install postcss postcss-cli autoprefixer cssnano

postcss.config.js

标准的 PostCSS 配置文件：

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({ preset: 'default' })
  ]
};

将 PostCSS 作为构建流水线步骤

在 Vite 中，PostCSS 已内置。将配置添加到 vite.config.js 或 postcss.config.js 中：

// vite.config.js
import autoprefixer from 'autoprefixer';

export default {
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  }
};

PostCSS 节点类型

PostCSS 的 AST 有四种主要节点类型：

Root：整个 CSS 文件
Rule：一个选择器和声明块
Declaration：一个属性和值的组合
AtRule：@ 规则（@media、@keyframes 等）

源代码映射

PostCSS 可以生成源代码映射，将压缩后的输出映射回原始 CSS，从而便于在浏览器 DevTools 中调试。

PostCSS 与 CSS-in-JS

PostCSS 转换静态 CSS 文件。CSS-in-JS 在运行时通过 JavaScript 动态生成 CSS。两者适用于不同的场景——PostCSS 更适合传统样式表，而 CSS-in-JS 更适合组件作用域内的动态样式。

通过 CLI 运行 PostCSS

使用 CLI 处理文件：

npx postcss input.css -o output.css --use autoprefixer cssnano

快速检查

PostCSS 使用什么来表示待转换的 CSS？

回顾

PostCSS 是一种通过插件流水线处理 CSS 的 CSS 转换工具。它会将 CSS 解析为 AST，由插件进行转换，然后再序列化回 CSS。您可以使用它来自动添加浏览器厂商前缀、压缩 CSS、填充现代 CSS 特性，以及执行自定义转换。它原生集成于 Vite 和 webpack 构建工具。

常见问题解答