PostCSS 入门教程

PostCSS 是什么？

PostCSS 是专门用于处理 CSS 代码的工具，通过一系列的插件来修改最终样式，这样不仅可以让我们使用最新的 CSS 特性，提高开发效率，还可以转义 CSS，实现兼容大多数浏览器。它相当于 CSS 界的 Babel。

为什么使用 PostCSS

例如，我们可以利用 autofixer 插件，把一些新的 CSS 特性加上浏览器特有的前缀，来兼容不同的浏览器：

box-sizing: border-box;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

或者利用 postcss-preset-env 插件，来使用最新的 CSS 特性，并转义为主流浏览器支持的版本：

.box {
  background: #000000;

  &:hover {
    background: #000000;
  }
}

.box:hover {
  background: #000000;
}

PostCSS 通过插件也支持 CSS 预处理工具的特性，这样可以单独使用它，不过也可以结合像 SASS 之类的库一起使用。

接下来我们看一下 PostCSS 的使用流程和常见插件的例子。需要注意的是，大多数构建工具内置了 PostCSS，例如 vite，可以直接配置，我们这里直接使用命令行的形式，方便演示。

初始化项目

mkdir boxes
cd boxes
yarn init -y

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <div class="boxes">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </main>
  </body>
</html>

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

main {
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  background: hsl(220deg, 10%, 5%);
}

.boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100%;
  align-items: center;
  justify-items: center;
}

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(
    156deg,
    rgba(0, 13, 168, 1) 0%,
    rgba(255, 0, 239, 1) 100%
  );
  border-radius: 8px;
  box-shadow: 0 0 48px rgba(255, 0, 239, 0.2);
}

live server 预览

安装并运行 PostCSS

安装

yarn add --dev postcss postcss-cli

运行

npx postcss style.css -o dist.css

index.html 替换

<link rel="stylesheet" href="dist.css" />

预览

Autoprefixer

自动加前缀，兼容浏览器安装：

yarn add --dev autoprefixer

运行：

npx postcss style.css -o dist.css -u autoprefixer

没变化，因为这些属性在大部分浏览器都是可以使用的。看一下需要加前缀的属性，以及 autoprefixer 现在匹配的目标浏览器：

npx autoprefixer --info

修改支持的浏览器列表

  "browserslist": [
    "cover 99.5%"
  ]

再运行：

npx postcss style.css -o dist.css -u autoprefixer

可以看到很多都加上了前缀配置文件使用方式（后面使用这种）： postcss 支持配置文件：（根目录）postcss.config.js：

添加 autoprefixer

module.exports = {
  plugins: [
    require("autoprefixer"),
    };

再运行，不用 -u 了：

npx postcss style.css -o dist.css

PostCSS Preset Env

使用最新的 css 特性，并编译为就浏览器兼容的语法，类似于 babel preset env 安装：

yarn add --dev postcss-preset-env

配置：

stage0：要使用 css 最新的嵌套语法

const postcssPresetEnv = require("postcss-preset-env");
module.exports = {
  plugins: [
    require("autoprefixer"),
    postcssPresetEnv({
      stage: 0, // 要使用 css 最新的嵌套语法
    }),
  ],
};

改动 style.css：

.box 使用嵌套方式设置 hover，交换渐变色

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(156deg, rgba(0,13,168,1) 0%, rgba(255,0,239,1) 100%);
  border-radius: 8px;
  box-shadow: 0 0 48px rgba(255,0,239,0.2);

  &:hover {
    background: linear-gradient(156deg, rgba(255,0,239,1) 0%, rgba(0,13,168,1) 100%);
  }
}

运行：

npx postcss style.css -o dist.css

StyleLint

检查 CSS 语法安装：

yarn add --dev stylelint stylelint-config-standard

添加配置文件：

标准检查

{
  "extends": "stylelint-config-standard"
}

配置 postcss.config.js：

const postcssPresetEnv = require("postcss-preset-env");
module.exports = {
  plugins: [
    require("stylelint"),
    require("autoprefixer"),
    postcssPresetEnv({
      stage: 0,
    }),
  ],
};

运行：

npx postcss style.css -o dist.css

可以看到一些警告（见视频）

PostCSS pxtorem

转换 px 为 rem 安装：

yarn add --dev postcss-pxtorem

配置：

const postcssPresetEnv = require("postcss-preset-env");
module.exports = {
  plugins: [
    require("stylelint"),
    require("autoprefixer"),
    postcssPresetEnv({
      stage: 0,
    }),
    require("postcss-pxtorem"),
  ],
};

修改 style.css：

给 main 添加 font-size: 24px;

main {
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  background: hsl(220deg, 10%, 5%);
  font-size: 24px;
}

运行：

npx postcss style.css -o dist.css

npm script

build

"scripts": {
    "build": "postcss style.css -o dist.css"
  },

小结

好了，这节课我们介绍了 PostCSS 的概念和基本用法，你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑，示例全部都为工作项目简化而来，学完即可直接上手开发！

即使你已经是高级前端工程师，在课程里也可能会发现新的知识点和技巧，让你的工作更加轻松！

《React 完全指南》课程，连载中现只需 48 元（领取优惠券）点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程，包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解，让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程，利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书，包含 JavaScript 全面的语法知识和新特性，可在京东、当当、淘宝等各大电商购买

PostCSS 是什么？​

为什么使用 PostCSS​

初始化项目​

安装并运行 PostCSS​

Autoprefixer​

PostCSS Preset Env​

StyleLint​

PostCSS pxtorem​

npm script​

小结​