「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」
前面我们已经讲了 webpack 对 css、less 文件的处理，和处理 less 文件类似，处理 sass、stylus 也只需安装对应的工具再进行配置即可，具体可以查看官方文档：webpack.js.org/loaders/sas… 以及 webpack.js.org/loaders/sty… 。
下面，我们再来讲一个特别好用的工具：PostCSS。
1. 认识 PostCSS 工具
PostCSS是什么呢？PostCSS是一个通过JavaScript来转换样式的工具；- 它可以帮助我们进行一些
CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置； - 但是实现这些功能，我们需要借助
PostCSS对应的插件；
- 如何使用
PostCSS呢？主要就是两个步骤：- 查找
PostCSS在构建工具中的扩展，比如webpack（构建工具） 中的postcss-loader（扩展）； - 添加你需要的
PostCSS相关的插件；
- 查找
前面我们说过，当我们说到 webpack 时，其实不只包含它的核心代码，还包括它的生态，比如说它的 loader，那么这里就有一个 postcss-loader，这个 loader 又需要依赖 PostCSS 这个工具，而这个工具在真正起作用时又依赖它里面安装的插件（plugins）。这个 PostCSS 工具本身也是一个独立的工具，它就像 webpack 一样，里面也可以安装很多的 plugins，不同的 plugin 就有不同的作用。
下面，我们先来看下如何单独使用 PostCSS。
2. 命令行使用 PostCSS
我们可以直接在终端中使用 PostCSS，但还需要安装一个工具：postcss-cli（借助 postcss-cli，就可以在命令行界面或 npm 脚本中使用 PostCSS 了）。
先来安装它们：
npm install postcss postcss-cli -D
然后，我们还需要去安装 PostCSS 对应的一些插件，因为 PostCSS 只有依赖插件才会生效。比如，我们想要通过 PostCSS 的某个插件给某些属性添加浏览器前缀，那我们就可以安装 autoprefixer 这个 PostCSS 插件，这个插件可以帮助我们自动给 CSS 属性添加浏览器前缀：
npm install autoprefixer -D
工具都准备好了，还差个需要转换的 css 文件，我们在项目目录下新建一个 test.css 文件，文件内容如下：
.title {
user-select: none;
}
我们拿 CSS 属性 user-select 举例，因为这个属性通常是需要添加浏览器前缀的（目的是适配多个浏览器）。
下面，我们就使用 PostCSS 对这个 css 文件进行转换，我们来运行下面的命令：
npx postcss --use autoprefixer -o demo.css test.css
上面的命令表示：使用局部安装的 PostCSS 并使用 autoprefixer 插件对当前目录下的 test.css 文件进行转换，转换结果输出到当前目录下的 demo.css 文件中。
成功执行上面的命令后，就会看到项目目录下新生成了一个 demo.css 文件，里面的内容如下：
.title {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UseUJBQWlCO0tBQWpCLHNCQUFpQjtNQUFqQixxQkFBaUI7VUFBakIsaUJBQWlCO0FBQ25CIiwiZmlsZSI6ImRlbW8uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnRpdGxlIHtcbiAgdXNlci1zZWxlY3Q6IG5vbmU7XG59Il19 */
可以看到，PostCSS 通过 autoprefixer 插件成功给我们的 CSS 属性添加了浏览器前缀。当然，关于浏览器前缀的有关问题，比如何时加何时不加，这跟浏览器查询和 browserslist 工具有关，具体可以阅读我之前写过的一篇文章：深入 Webpack5 等构建工具系列二(7) - 浏览器兼容性和 browserslist。
补充：这里有一个网站：autoprefixer.github.io/，我们可以在这个网站上测试查看某个
CSS属性是否需要加浏览器前缀。
以上，就是我们单独使用 PostCSS 的方式。但在真实开发中，我们又该怎么做呢？我们下篇文章再来讲。
