Vue 项目之 Webpack 中 PostCSS 工具的使用（1）

Vue 项目之 Webpack 中 PostCSS 工具的使用（1）

「这是我参与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 呢？主要就是两个步骤：
  1. 查找 PostCSS 在构建工具中的扩展，比如 webpack（构建工具） 中的 postcss-loader（扩展）；
  2. 添加你需要的 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 的方式。但在真实开发中，我们又该怎么做呢？我们下篇文章再来讲。