知识来源：代金权老师的讲解
流程认识
在学习 postcss 之前，我们先看一个 全屋净水系统 流程；因为知道了这个东西流程，也就大致清楚了 postcss 的工作流程。
那么 postcss 的工作原理类似：
- 全屋净水系统的目的：就是为了使人们喝上干净的纯净水。
- postcss 的目的：就是为了使所有浏览器都是能够正常的运行 css 代码。
什么情况下能正常运行：
- css 新的语法，老的浏览器不支持，需要降级
- less / sass 等写法，浏览器不认识，需要编译
- 不同浏览器支持度不一样，需要添加独自的前缀
postcss 的说法认识
说法一：
postcss 和 less / sass 是一个级别的。（根据上面的流程图，明显不对，postcss 也是包含 less 等功能的）
说法二：
postcss 是一个后处理器。
postcss 已经停止维护对 less/ sass 等代码进行转化了，只需要拿到 less 和 sass编译后的代码，进行下一步处理，因为是拿到 less 编译后的代码，所以称为后处理器。
postcss 为什么要停止维护对 css 预处理器的转化呢？
less 和 sass 的更新太快，postcss 的对应处理插件就需要更新多快，成本消耗太大，放弃维护。
只是 postcss 不想做，而不是不能实现。
postcss 的基本使用
安装
pnpm install postcss-cli postcss -D
创建脚本
先执行一个 npm init -y，生成一个package.json 文件。
{
"name": "postcss1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "postcss index.css -o res.css" // postcss 命名
},
"author": "",
"license": "ISC",
"dependencies": {
"postcss": "^8.4.21",
"postcss-cli": "^10.1.0"
}
}
文件创建
执行脚本之后，可以看见没有发生任何的变化。
创建 postcss.config.js
postcss 命令执行的时候，会自动读取 postcss.config.js 文件。
安装预设 postcss-preset-env。
何为预设：就是内置了很多插件，不需要自己单独安装插件进行处理。比如：
- 内置了新语法降级的插件。
- 内置了添加浏览器前缀的插件。
- 。。。
pnpm install postcss-preset-env -D
// poctcss.config.js
const postcssPresetEnv = require("postcss-preset-env");
module.exports = {
plugins: [postcssPresetEnv()],
};
一些列操作之后，再执行脚本，就会发现生成的 css 文件已经转化了
结语
相信码友们对 postcss 有一定的认知了，那么该篇的目的就达到了。
