11

优化auto-prefixer配置

更新于 2017/6/8

终于克服懒惰,把post-css用上了,感觉可以抛弃stylus-loader了,哈哈,不过目前为了兼容,只修改了auto-prefixer的配置,它的文档在这

将原有写在loader中配置,转移到根目录下的postcss.config.js中,代码如下

module.exports = {
    plugins: {
        'autoprefixer': {},
      //  'postcss-px2rem': {remUnit: 100}
    }
}

这里可以看到我没有对autoprefixer进行任何的配置,这是因为我把相关配置写入到了package.json文件,相关代码如下

  "browserslist": [
    "iOS >= 8",
    "Firefox >= 20",
    "Android > 4.4"
  ]

如果非要在postcss.config.js中配置的话,请使用browsers参数来配置。

browserslist识别的浏览器关键词如下:

  • Android for Android WebView.

  • BlackBerry or bb for Blackberry browser.

  • Chrome for Google Chrome.

  • ChromeAndroid or and_chr for Chrome for Android

  • Edge for Microsoft Edge.

  • Electron for Electron framework. It will be converted to Chrome version.

  • Explorer or ie for Internet Explorer.

  • ExplorerMobile or ie_mob for Internet Explorer Mobile.

  • Firefox or ff for Mozilla Firefox.

  • FirefoxAndroid or and_ff for Firefox for Android.

  • iOS or ios_saf for iOS Safari.

  • Opera for Opera.

  • OperaMini or op_mini for Opera Mini.

  • OperaMobile or op_mob for Opera Mobile.

  • QQAndroid or and_qq for QQ Browser for Android.

  • Safari for desktop Safari.

  • Samsung for Samsung Internet.

  • UCAndroid or and_uc for UC Browser for Android.

==================================以上为更新内容=========================

=============================以下为旧内容=================================

之前一直使用auto-prefixer-loader的默认配置,即autoprefixer-loader?browsers=last 2 version,一直没深究为何要这么配置,直到在开发WEBAPP的项目中,使用了flex语法,结果发现编译出来的有-ms-flex-moz-flex,我期望的是只用-webkit-就行了,不用搞这么多,于是赶紧去官网找资料。。。

查阅了资料后发现,autoprefixer工具使用Browserslist来匹配符合条件的浏览器,Browserslist提供了一个网站browserl.ist来帮助我们找到期望的浏览器版本,上去试了试,发现搜索的关键字要注意下,比如如果要搜索Android Browser > 4.2实际上输入Android > 4.2就可以了,Android Browser > 4.2反而搜不到。。。

最后我把我的auto-prefixer-loader配置修改成如下

  `autoprefixer?{browsers:["iOS >= 7","Android >= 4"]}`

其实应该使用postCSS,不过一直没时间学习,有空我再补上。


Larry_
704 声望186 粉丝

FE