优化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
,不过一直没时间学习,有空我再补上。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。