为什么使用PostCSS？

什么是PostCSS？

PostCSS是什么？最好的定义来自于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基于js插件去转换css的一个工具。这些插件支持变量，mixin，未来的css语法，在线图片甚至更多。

所以PostCSS只是一个转化css的工具，让我们更好的去写css

编译速度快

编译同一个文件，不同编译器的编译时间如下

一些常用插件

autoprefixer是PostCSS最著名的一款插件，就不过多介绍了，相信同学们都使用过。
postcss-cssnext (内置autoprefixer) 允许你使用未来的css语法，如css4（可以理解为css中的Babel）
postcss-sprites 自动制作雪碧图，不用手动拼接啦，哈哈哈
cssnano 压缩css代码(如果你是用webpack的话，css-loader集成了cssnano，你不需要再次引入)
postcss-hash-classname 把转换后的css文件名附上哈希值
pixrem 将rem转换为px
postcss-px-to-viewport 将px转换为vh和vw（推荐作为移动端的计量单位，而不是rem）
postcss-pxtorem 将px转换为rem

用法

npm构建

先用npm安装脚手架

npm i -g|-D postcss-cli

命令行通过PostCSS输出css

postcss –use autoprefixer -c options.json -o main.css css/*.css

具体用法请点击github官网：https://github.com/postcss/postcss-cli

Webpack

首先安装postcss-loader

npm install postcss-loader –save-dev

webpack配置：

module.exports = {    module: {        rules: [            {                test: /\.css$/,                exclude: /node_modules/,                use: [                    {                        loader: 'style-loader',                    },                    {                        loader: 'css-loader',                        options: {                            importLoaders: 1,                        }                    },                    {                        loader: 'postcss-loader'                    }                ]            }        ]    }}

并且你需要在项目根目录下配置一个postcss.config.js文件，以autoprefixer为例:

//postcss.config.jsmodule.exports = {  plugins: {    'autoprefixer': {        browsers: '> 5%',        grid: true    }  }}

gulp

安装gulp-postcss和gulp-sourcemaps
配置如下：

gulp.task('css', function () {    var postcss    = require('gulp-postcss');    var sourcemaps = require('gulp-sourcemaps');    return gulp.src('src/**/*.css')        .pipe( sourcemaps.init() )        .pipe( postcss([ require('precss'), require('autoprefixer') ]) )        .pipe( sourcemaps.write('.') )        .pipe( gulp.dest('build/') );});

参考链接：1.w3cplus2.PostCSS的github官网