Howe's Blog

PostCSS介绍与使用

发布于: 8/23/2022 阅读大约需要3分钟

介绍

postcss正如其名字一样，属于 css 后置处理器，它的作用就相当于 JavaScript 的Babel一样，用来处理我们的 css 代码并输出处理后的 css。
由上面的介绍你也可以看出，postcss实质上是一个 css 解析器，用于将 css 文件解析成 AST，并对 AST 进行改写来达到我们所需的目的（比如添加浏览器前缀）。
image.png

autoprefixer是大家耳熟能详的 postcss插件了，它用于为我们的样式选择器添加目标浏览器前缀来兼容多浏览器下的样式。 它根据用户指定的浏览器版本去 caniuse查找 css 属性的兼容情况，再将不兼容的 css 属性进行添加前缀或者改写。

它与 scss、less、stylus有什么不同吗？

首先， sass(scss)、less、stylus都属于 css 预处理器，与 postcss这种后置处理器不同的是， 预处理器可能会为我们提供了一些超出 css 语言本身的语言特性（如编程能力）来使我们能够更快捷的开发 css， 而 postcss 则（几乎）不侵入我们的编程过程， 只是对我们的输出进行二次加工。
image.png

它提供了什么能力？

因为它本质上是解析器，所以它的能力取决于其社区开源插件的数量（目前数百个）。
目前，比较常用的插件以及其提供的能力如下：

  • postcss-preset-env: 可以让我们使用最新的css语法（而不用过度担心兼容性）
  • cssnano：用于压缩css
  • autoprefixer：为你的css语法添加浏览器兼容前缀
  • lostgrid：强大的栅格系统
  • postcss-nested：可以让我们使用像 sass、less一样的嵌套语法
  • postcss-pxtorem：将px转换为rem，多用于移动端适配

更多插件可以前往GitHub进行搜索查看，可以先在官方的插件列表中进行查看。 如果你在社区中没有找到符合你使用场景的插件，你也可以自己开发一个插件来专门适用于你自己的场景。 当然，你也可以将其开源，为开源社区贡献一份力量。

使用

由于目前前端打包工具种类比较丰富， 所以本文只会使用一到两个打包工具进行举例说明。其他工具的配置及使用请自行搜索学习。

安装

# npm 
npm install -D postcss
# pnpm
pnpm add -D postcss

配置

在项目根目录下新建 postcss.config.js来放置postcss配置

module.exports = {
  // plugins用于放置我们需要开启的postcss插件
  plugins: [
    'autoprefixer',
    // 数组形式: [插件名称, 插件配置]
    ['postcss-short', { prefix: 'h' }]
  ],
  // plugins 也可以使用对象的形式
  plugins: {
    autoprefixer: {},
    'postcss-short': {
      prefix: 'h'
    }
  }
}

Vite

vite 已经内置了postcss支持，Vite | css.postcss

Webpack

需要搭配postcss-loader进行使用

 module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader','css-loader','postcss-loader'],
      },
    ]
 }

相关链接