PostCSS

PostCSS：是一个可以通过 JavaScript 来对 CSS 进行转化和适配的工具。也就是说，这个工具中执行的其实都是 JavaScript 代码，它是通过 JavaScript 代码来对 CSS 样式进行转换和适配。例如：自动添加浏览器前缀、CSS 样式的重置等。但是这个工具本身其实实现不了什么功能，要实现上述的功能，需要借助 PostCSS 中对应的插件，将对应插件集成到 PostCSS 中实现 。

使用 PostCSS：

PostCSS 是一个独立的工具，可以单独使用，也可以在各种构建工具中使用。

单独使用：

1. 首先需要安装 postcss 和 postcss-cli 才能在命令行中单独使用 PostCSS：npm install postcss postcss-cli --save-dev。
2. 然后安装需要的插件：例如 npm install autoprefixer --save-dev。
3. 最后在命令行中运行 npx postcss --use autoprefixer -o target.css origin.css，PostCSS 就会使用 autoprefixer 插件对 origin.css 中的 CSS 样式添加对应的浏览器前缀并生成 target.css 文件。

在构建工具中使用：

1. 首先需要安装并配置 PostCSS 在构建工具中的扩展，才能在构建工具中引入 PostCSS 来使用 。例如：Webpack 中的 postcss-loader。
2. 然后添加需要的 PostCSS 插件。

常见的 PostCSS 插件：

autoprefixer：

autoprefixer：自动为 CSS 样式添加浏览器前缀。

postcss-preset-env：

postcss-preset-env：将一些现代的 CSS 特性转换为大部分浏览器都识别的 CSS 特性，并且会根据目标浏览器或者运行时环境添加所需的 polyfill。

postcss-preset-env 也会自动为 CSS 样式添加浏览器前缀，相当于已经集成了 autoprefixer 的功能。因此相比 autoprefixer 插件，postcss-preset-env 插件使用更多。