PostCSS 扫盲指南

2022-10-15

是什么

PostCSS 是一个用 JavaScript 转换 CSS 的工具，可以简单认知为 css 的 babel；通过使用相关的插件可以实现以下功能（包括但不止

  • 支持 css 预处理工具的特性（可以单独使用某个特性
  • 兼容旧版本的浏览器
  • 使用最新的特性

如何工作

接收一个 CSS 文件并提供一个 API 分析、修改规则（通过把 CSS 编译成一个抽象语法树的方式；开发者可通过 API 开发出各种插件来修改 CSS 规则。

为什么要用

  • 向后兼容浏览器
  • 最新的 CSS 特性
  • 模块化
  • 优秀的插件生态

有什么插件可用

  • postcss-import
  • autoprefixer
  • cssnano
  • postcss-preset-env 插件集

怎么用

postcss-cli 方式

yarn add -D postcss postcss

yarn postcss .\style.css -o dist.css

yarn add -D autoprefixer

yarn postcss .\style.css -o dist.css -u autoprefixer

yarn postcss .\style.css -o dist.css -u autoprefixer
  • -u 指定插件
  • 使用 autoprefixer 一般需要指定 browserslist 的范围
  • 使用配置文件方式（ postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
  ]
}

yarn postcss .\style.css -o dist.css
cd ..