简介：
它是什么？

PostCSS自身项目在github上的描述：“PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.“
PostCSS是CSS变成JavaScript的数据，使它变成可操作。PostCSS是基于JavaScript插件，然后执行代码操作。PostCSS自身并不会改变CSS，它只是一种插件，为执行任何的转变铺平道路。

PostCSS 提供了一个解析器，它能够将 CSS 解析成抽象语法树（AST）。

所以说，PostCSS 它需要一个插件系统才能够发挥作用。我们可以通过“插件”来传递AST，然后再把AST转换成一个串，最后再输出到目标文件中去。

它能解决我们什么问题？

它的插件生态系统提供不同的功能：它有很多不同的插件。这些插件允许你使用新语法、颜色函数、自定义属性、自定义选择器、媒体查询的别名以及更多。比如热门的：autoprefixer。

根据你需要的特性进行模块化 : PostCSS的基本原理是粒子化，模块化。简而言之，没有处理多个功能的笨重插件。相反，每创建一个插件，就是一个功能。

快速编译：PostCSS测试速度很快，其有两个原因：其一你只需要加载需要的插件；其二它是运行在JavaScript上。

可以创建任何自己想要的插件：PostCSS是用JavaScript编写的插件，这样只要能编写JavaScript的就可以创建一个自己想要的插件，达到自己的目的。

可以像普通的CSS一样使用它

它是通过什么方式来解决我们的问题？

比较常用的插件比如：autoprefixer import cssnext (使用新语法的插件)

在webpack下配置：

配置主要是借助于postcss-loader，将PostCSS的生态圈依托在webpack之下。

安装webpack postcss loader $ npm install postcss-loader --save-dev

postcss-import ： 当引入一个css文件，为了解决路径问题，postcss-import插件做地址的“智能查找”。它查找的顺序依此是：process.cwd(), web_modules, node_modules or local modules. 做到将多个文件引入进一个文件。

可能还需要 extract-text-webpack-plugin 这个插件： 作用是将样式抽出出来为独立的文件。

基本配置：
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// ...
module: {
// ...
loaders: [
// ...
{
test: /.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader!postcss-loader'),
// webpack的loader的配置是从右往左的，就是将less文件通过post-loader（插件等）解析为less，再通过less-loader解析为css文件，最后通过css-loader嵌入到js代码中，然后extract-text-webpack-plugin插件将样式从js中抽离出来为独立的文件。
},
// ...
],
postcss: function (webpack) {
return [ // 里面是我们要用的插件
];
},
// ...
}

autoprefixer : 浏览器兼容补全前缀

// webpack.config.js
const autoprefixer = require('autoprefixer');
// ...
postcss: function(){
return [autoprefixer({ browsers: ['last 2 versions'] })] // 兼容主流浏览器的最新两个版本
}

.flex {
display: flex;
}
/* 经过autoprefixer处理 */
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}