前端技术分享
0%

CSS 后处理器 PostCSS

发表于 分类于

PostCSS 是什么？

PostCSS 是 CSS 后处理器，用 JavaScript 转换 CSS。

安装

1
npm install postcss-cli

使用

1
2
3
4
5
6
7
const postcss = require('postcss')

postcss([require('autoprefixer')])
  .process(css, { from: 'input.css', to: 'output.css' })
  .then(result => {
    console.log(result.css)
  })

常用插件

Autoprefixer

自动添加厂商前缀。

1
require('autoprefixer')

CSSNano

压缩 CSS。

1
require('cssnano')

PostCSS Preset Env

使用 CSS 新特性。

1
require('postcss-preset-env')

配置

postcss.config.js

1
2
3
4
5
6
7
8
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default'
    })
  ]
}

package.json

1
2
3
4
5
{
  "scripts": {
    "build-css": "postcss src/styles.css -o dist/styles.css"
  }
}

自定义插件

1
2
3
4
5
6
7
8
9
10
const plugin = () => {
  return {
    postcssPlugin: 'postcss-example',
    Rule(rule) {
      // 修改规则
    }
  }
}

plugin.postcss = true

总结

PostCSS 灵活强大。结合各种插件，可以自动化 CSS 处理流程。