你对postcss了解多少呢？

[官方解释]：

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

借助JavaScript，PostCSS自身只包括以下4中能力：

⁃ css分析器
⁃ css节点树API
⁃ source map生成器
⁃ css节点树拼接器

关键介绍：

其实，postcss目前已经超过200+的插件，她几乎可以完成你所有和 CSS 相关的工作（包括 Sass 和 Less 这些预处理器的工作），极大的提高你处理 CSS 的效率。

有些插件可以让你使用未来的语法，允许你使用诸如颜色函数，径向渐变，自定义属性，自定义选择器，为媒体查询自定义别名以及许多其他的功能。还有一些颜色管理的插件，用来把颜色从一种格式转换到另一种格式，修改颜色的 alpha 透明度，合成颜色等。

你目前开发的项目，不论你是用css，sass，less等格式来写，你都能使用postcss，而且不会相互影响。使用了postcss之后，你会发现，你只要维护一个（postcss）版本。

PostCSS 的插件是用 JavaScript 写的，只要你有想法，有一定的 JS 基础，你就可以把你的想法用插件的形式实现出来。你不需要安装Ruby环境。而且和构建工具无缝集成。

那么构建工具webpack如何配置postcss？

从官方文档中一句话中知道:
The Autoprefixer PostCSS plugin is one of the most popular CSS processors.
那么我们现在以autoprefixer为例，把postcss的autoprefixer配置到webpack中。
直接把配置文件的源代码发此处

'use strict';
const path = require('path');
const srcPath = path.join(__dirname, '/../src');
const dfltPort = 8000;
function getDefaultModules() {
  return {
    preLoaders: [{
        test: /\.(js|jsx)$/,
        include: srcPath,
        loader: 'eslint-loader'
      }],
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader!postcss-loader'
      },
      {
        test: /\.sass/,
        loader: 'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded&indentedSyntax'
      },
      {
        test: /\.scss/,
        loader: 'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded'
      },
      {
        test: /\.less/,
        loader: 'style-loader!css-loader!postcss-loader!less-loader'
      },
      {
        test: /\.styl/,
        loader: 'style-loader!css-loader!postcss-loader!stylus-loader'
      },
      {
        test: /\.(png|jpg|gif|woff|woff2)$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /\.(mp4|ogg|svg)$/,
        loader: 'file-loader'
      }
    ]
  };
}
module.exports = {
  srcPath: srcPath,
  publicPath: '/assets/',
  port: dfltPort,
  getDefaultModules: getDefaultModules,
  postcss: function () {
    return [
      require('autoprefixer')({
        browsers: ['last 2 versions', 'ie >= 8']
      })
    ];
  }
};

如何开发postcss插件呢？

其实开发插件之前，你肯定会想到api吧。那么postcss Api，非常详细的插件开发流程。
这里提供一个链接“快点我”，你可以直接在此尝试postcss强大的插件功能。
当然，做任何事情都得有原则，有规范，postcss插件开发也不例外。

• 不重复开发已有插件能力
• 插件功能单一
• 实现插件的逻辑时，尽可能使用异步流程，如：Promise, Generator, Async-await

结束语：

说了这么多，你对postcss了解了吗？
还不赶紧试试~
详情请点击官方链接
如果你觉得通过这篇文章，你知道了postcss是什么，怎么玩了，请帮忙点个赞。如果有哪里说的不对的地方，请留下贵大神指出哦。