VUE下postcss(autoprefixer，CSSNext，px2rem等)的设置（自动css前缀等）

按照vue官网安装完毕的vue项目，
可以在package.json文件里的devDependencies配置中，看到已经导入了autoprefixer组件。

"devDependencies"={
  "autoprefixer": "^6.7.2",
  "babel-core": "^6.22.1",
...
}

我们知道autoprefixer是一个loader，在一般的项目中，我们是在webpack.conf.js里，这样配置和引入它的：

module: {
  loaders: [{
    test: /\.css$/,
    loader: 'css-loader!autoprefixer-loader?browsers=last 2 versions'
  }]
}

查看vue构建的项目里，build/build.js里的webpack引入的参数，启用的配置是：

var webpackConfig = require('./webpack.prod.conf')

跟着配置一直走，最终跟踪到 vue-loader.conf.js文件

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  postcss: [
    require('autoprefixer')({
      browsers: ['last 2 versions']
    })
  ]
}

是的，终于发现他了，VUE没有直接使用loader配置autoprefixer，而是把它加入到vue-loader里。
如果你觉得它不生效，那可能是 last 2 versions这个默认配置太保守了，直接改成20吧哈哈。
关于vue-loader的介绍在此链接-vue-loader，更具体的关于其postcss的内容在此链接-vue-loader postcss
如果想加入诸如cssnet px2rem等其它postcss的组件，也是在这个地方加入便可。

  postcss: [
    require('autoprefixer')({browsers: ['last 2 versions'] }),
    require('postcss-px2rem')({remUnit: 34.5}),
    require('postcss-cssnext')()
]