vue2 webpack2 为less/css自动添加前缀autoprefixer

为了兼容不同的浏览器，很多时候要写前缀，不然存在很多兼容性问题，如果用webpack的话，很容易实现自动添加前缀，我现在用的项目是基于vue2 webpakc2的，查阅了很久没有发现便捷的解决方案：

1. 安装 postcss-loader

npm install postcss-loader --save-dev

2.配置webpack.conf.js

 rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                // vue-loader options go here
                postcss: [require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })]
            }
        }, 
{
            test: /\.less$/,
            loader: 'style-loader!css-loader!postcss-loader!less-loader'
        }]

一行代码即可实现css前缀添加,很是方便

vue-loader