PostCss

---

PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。而使用PostCSS则需要与webpack或者parcel结合起来。

---

PostCss已经被很多公司使用：谷歌，推特，阿里巴巴和 Shopify。 Autoprefixer PostCSS 插件是最流行的 CSS 处理器插件之一。

PostCSS 是模块化的工具，比之前那些快3-30 倍，而且功能更强大。 

与wbpack结合使用： 

var path = require('path');
module.exports = {
context: path.join(__dirname, 'app'),
entry: './app',
output: {
   path: path.join(__dirname, 'dist'),
   filename: 'bundle.js'
},
module: {
   loaders: [
     {
       test:   /\.css$/,
       loader: "style-loader!css-loader!postcss-loader"
     }
   ]
},
postcss: function () {
   return [require('autoprefixer')];
}
} 

 

postcss-loader 用来对.css 文件进行处理，并添加在 style-loader 和 css-loader 之后。通过一个额外的 postcss 方法来返回所需要使用的 PostCSS 插件。require('autoprefixer') 的作用是加载 Autoprefixer 插件。 

---

Autoprefixer是一个根据can i use解析css并且为其添加浏览器厂商前缀的PostCSS插件。不加任何vender prefix的通常写法。 

因此Autoprefixer是一个非常有用的加速前端开发的一个工具，但是它需要基于PostCSS去发挥作用。