React 实战环境篇(2)Autoprefixer CSS自

效果展示：

原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"
]

• browserl

• browserslist

• 优化auto-prefixer配置，让CSS适配不同浏览器