React 实战环境篇(2)Autoprefixer CSS自动补全前缀-浏览器兼容

96
Arison
2018.04.19 10:53* 字数 199

效果展示:

原index.css:
.div{
        animation: App-logo-spin infinite 20s linear;
        display: flex;
        border-radius: 30%;
    }

新index.css:

.div{
    -webkit-animation: App-logo-spin infinite 20s linear;
    animation: App-logo-spin infinite 20s linear;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    border-radius: 30%;
}
image.png
image.png

准备工具:

  • webstorm17.1
  • node,npm
  • autoprefixer (主角)

安装步骤

step1:安装node.js
(http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html)
step2:安装Autoprefixer npm install autoprefixer -g
step3:安装postcss-cli npm install postcss-cli -g
step4:设置webstorm External Tools
打开webstorm->File->搜索External Tools->点击‘+’,设置Edit Tool

image.png

Program:C:\Users\Arison\AppData\Roaming\npm\postcss.cmd
Parameters:-u autoprefixer -o $FileDir$$FileName$ $FileDir$$FileName$
Working directory :$ProjectFileDir$

至于设置快捷键,比较简单,自行查阅百度。

这里重点说下浏览器兼容版本设置(如果不设置浏览器版本信息,可能不会产生你看见的前缀补全哦):

image.png
image.png
// Default browsers query
browserslist.defaults = [
   '> 0.5%',
   'last 2 versions',
   'Firefox ESR',
   'not dead',
   "iOS >= 8",
   "Firefox >= 20",
   "Android > 4.4"
]
React&Redux
Web note ad 1