1、介绍
Autoprefixer是一款自动管理浏览器前缀的插件,可以解析css文件并且添加前缀到css内容里,使用Can I Use(caniuse网站)的数据决定哪些前缀是需要的。该插件css解析器采用postcss,使用Browserslist库,可以对浏览器的版本做精确设置。
2、工具特点
(1)、写纯净的css,不必学习特殊语言(如Sass),也不必记住其使用环境;
(2)、与最新的规则同步;
3、在Vue中使用
(1)、安装postcss和autoprefixer
npm install postcss
npm install autoprefixer
(2)、在"项目名/build/webpack.base.conf.js "中加入
const autoprefixer=require("autoprefixer")

module:{
  rules:[
    {
      test:/\.vue$/,
      loader: 'vue-loader',
      options:{
        vueLoaderConfig,
        postcss:[require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie> 8'] })]
      }
    },
(3)、在package.json里面找到 browserslist,加入以下内容,以兼容主流机型
"browserList":[
  "> 1%",
  "Last 2 versions",
  "not ie <= 8",
  "iOS >= 8",
  "Firefox >= 20",
  "Android > 4.4"
]

Logo

前往低代码交流专区

更多推荐