学习 PostCSS 以及使用

vk阿木

已于 2022-11-03 10:29:38 修改

阅读量3k

点赞数

分类专栏： CSS 工具类文章标签：学习 postcss javascript

于 2022-10-27 17:39:50 首次发布

本文链接：https://blog.csdn.net/LizequaNNN/article/details/127367752

版权

工具类同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

学习 PostCSS 以及使用

《工欲善其事，必先利其器》

banner

一、初识 `PostCSS`

PostCSS 是一款 CSS 编译器；

PostCSS 是一个使用 JavaScript 工具和插件转换 CSS 代码的工具，它的主要功能其实是可以利用 JavaScript 去处理一些原生的 CSS 或者预处理器（Less、Sass）处理不了的工作。这种特性本质上，是基于 PostCSS 自身的编译能力和强大的插件系统支持的基础之上的。

例如，它能为某个 css 属性，根据项目内指定的浏览器种类和版本的 json 文件（或者 package.json 的属性），查询 caniuse 中，不同浏览器对该 CSS 属性的兼容情况，然后自动为这个属性补充不同的浏览器前缀。

再例如，px 是一个固定的长度单位，而设备视口的尺寸是各种各样的。如果我们想通过一套样式来适配各种设备的显示，就需要相对的单位，常用的是 rem。PostCSS 能依靠插件自动的，将项目内所有的 px 值，计算并改写为对应 rem 值。

除此之外还有很多很多功能，并且我们也能根据某些的特定需求，构建属于自己项目专属的功能插件。

PostCSS 利用自身的 parser 把 CSS 代码解析为抽象语法树；

编译器？抽象语法树？这不就跟针对 js 的编译器 babel 一样吗？

的确如此。

PostCSS 利用自身的 parser 把 CSS 代码解析为抽象语法树（AST），这里分为 parse、transform、generate 3个阶段。过程中，读取 postcss.config.js 配置文件的插件列表，利用插件改写 AST，最终输出改写后的 css 代码。

插件工作于 transform 阶段，基于 AST 做分析处理和转换。只不过，css 的 AST 比 JavaScript 的简单得多，没有分类成太多的规则。

ast and plugins
（图片取自掘金-神说要有光，侵删。）

而我们也可以通过 astexplorer.net ，能可视化的查看其匹配的规则：

可视化观察

二、预处理器与 `PostCSS` 之间的关系

从前文可知，PostCSS 输入与输出的产物都是 css 文件。因此，跟那些预处理器不同，它也被称为后处理器，因为其通常再 css 处理链条的最末端。

也就是说，预处理器和 PostCSS 其实是互不影响的，无论你是否选择使用 css 预处理器，PostCSS 总是最后工作。通过一张图即可完美诠释这个过程：

之间的关系
（图片取自掘金-魔术师卡颂，侵删。）

三、应用一个简单的 `PostCSS` 插件

下载工具、插件

这里我使用的包管理工具是 pnpm ，其他的下载

pnpm install postcss postcss-loader autoprefixer -D

配置插件

这里有几种配置方法，依次介绍一下：

注意，对于没有内置 postcss 的脚手架，在配置浏览器版本时，可以直接在脚手架的配置文件里面配置（例如 vue.config.js）。
而有内置 postcss 的脚手架，在配置浏览器版本时，则需要另外在 postcss.config.js 里面配置。

由 Vue-cli 创建的项目，于 vue.config.js 里面配置

// vue.config.js
module.exports = {
  css: {
	loaderOptions: {
	  postcss: {
		plugins: [
		  // ...其他插件
		  "autoprefixer": {
            // 配置使用 autoprefixer
            overrideBrowserslist: [
			  "Android 4.1",
         	  "iOS 7.1",
          	  "Chrome > 31",
          	  "ff > 31",
          	  "ie >= 8"
          	  "last 2 versions", // 所有主流浏览器最近2个版本
          	] 
          }
		]
	  }
	}
  }
}

由 Vite 创建的项目，是天然支持 postcss 的，使用之前只需要安装即可。因此需要在 postcss.config.js 里面配置插件，没有该文件的在项目根目录下自行创建：

// postcss.config.js
module.exports = {
  plugins: {
	// ...其他插件
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        'last 2 versions', // 所有主流浏览器最近2个版本
      ]
    }
  }
}

手撸党选择 Webpack 创建项目的，于 webpack.config.js 里面配置 postcss，也是需要另外配置 postcss.config.js 文件：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      }
    ]
  }
}

// postcss.config.js
module.exports = {
  plugins: {
	// ...其他插件
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        'last 2 versions', // 所有主流浏览器最近2个版本
      ]
    }
  }
}