在webpack中配置CSS前缀神器Autoprefixer

CSS兼容性前缀解决

  为了满足浏览器的兼容，有的CSS属性需要对不同的浏览器加上前缀，Autoprefixer使用 Can I Use 的数据来决定哪些前缀是需要的。
  Autoprefixer是一个后处理程序，不像 Sass 以及 Stylus 之类的预处理器。它适用于普通的 CSS，可以实现css3代码自动补全。也可以轻松跟 Sass，LESS及Stylus集成，在CSS编译前或编译后运行。
   其实用vue-cli构建的项目脚手架已经帮你把 autoprefixer 的配置做好了，自己不需要做什么改动就会自动加前缀。

在webpack中配置Autoprefixer

1. 安装autoprefixer：

cnpm install autoprefixer --save-dev

2. webpack.config.js中配置autoprefixer：

(1).引入autoprefixer：

const autoprefixer = require('autoprefixer');

(2).添加postcss-loader和插件配置：

          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                autoprefixer({
                     browsers: [
                          'last 10 Chrome versions',
                          'last 5 Firefox versions',
                          'Safari >= 6', 
                          'ie> 8
                     ] 
                  }),
              ]
            }
          }

a{
     transition :transform 1s
}

a{
     -webkit-transition :-webkit-transform 1s;
     transition :-ms-transform 1s;
     transition :transform 1s
}

注： 另外webpack还有一个autoprefixer-loader，但npm官网已将其标为【deprecated】，推荐使用通过postcss-loader的方式使用autoprefixer。

3.安装postcss-cli

Autoprefixer其实是postcss的插件，见github.com/code42day/p…

Vue-cli配置

Vue CLI 内部使用了 PostCSS
所以只需要修改.postcssrc.js和.browserslistrc文件即可，没有的话新建文件

.postcssrc.js

module.exports = {
  plugins: {
    "autoprefixer": {}
  }
};

.browserslistrc

> 1%
last 2 versions
not dead

测试的时候可以把.browserslistrc改成最后20个版本，否则可能看不到效果， 修改后需要重启