Webstorm配置CSS/SCSS自动补全兼容前缀autoprefixer插件

关于Autoprefixer

Autoprefixer是一个后处理程序，不象Sass以及Stylus之类的预处理器。它适用于普通的CSS，能够实现css3代码自动补全。也能够轻松跟Sass，LESS及Stylus集成，在CSS编译前或编译后运行。详情见，https://github.com/postcss/autoprefixer

当Autoprefixer添加前缀到你的CSS，还不会忘记修复语法差别。这种方式，CSS是基于最新W3C规范产生：

使用方法：

step1：安装node.js 
step2：安装Autoprefixer 

npm install autoprefixer -g

step3：安装postcss-cli  

npm install postcss-cli -g

step4：设置webstorm External Tools

打开webstorm->File->设置->搜索External Tools->点击‘+’，设置Edit Tool

 

Name:autoprefixer 

Tool settings

       Program： 找到AppData下的文件postcss.cm  若找不到AppData，在地址栏输入%appdata%回车便可

       Parameters：-u autoprefixer -o outputFile inputFile  注意文件顺序输出文件及输入文件 ，输入文件须要先新建，不能自动生成

       Working directory：文件目录便可，可根据本身须要调整

写具体配置，例如个人配置，如图：

1. Program:填入你的postcss-cli 的PATH；
2. Parameters: -u autoprefixer -o $FileDir$\$FileName$  $FileDir$\$FileName$ ，你能够根据你本身的须要配置，具体参见https://github.com/code42day/postcss-cli
3. Working directory :$ProjectFileDir$

使用（能够对scss和css文件均可使用）

在输出文件中点击右键->autoprefixer,

设置快捷键

点ok

完成

配置兼容程度：

在安装包目录下的node_modules\browserslist这个包里

配置文件是index.js

个人目录是： C:\Users\Administrator\AppData\Roaming\npm\node_modules\autoprefixer\node_modules\browserslist\index.js

 

 

 

webstorm配置scss自动编译路径

激活webstorm2016如何激活webstorm2016永久激活webstorm2016