Web前端开发资源网前段时间我写了一篇文章：WebStorm怎么设置实现自动编译less文件 利用lessc模块实现less文件自动编译城css文件。
但是有一个缺点，就是lessc编译后只能将less转换为css格式，并不能自动补全前缀。
我们可以用Autoprefixer模块来给css自动补全，实现多浏览器的兼容。
Autoprefixer使用起来很简单，它根据最新的W3C规范，自动补充CSS前缀并编写普通的CSS，生成旧浏览器的代码。
支持选择器（如:fullscreen和::selection），单元函数（calc()），at-rules（@supports和@keyframes）和属性。
编译前：
div {
background : linear-gradient(to top, black, white);
display : flex
}
::placeholder {
color : #ccc
}编译后：
div {
background : -webkit-linear-gradient(bottom, black, white);
background : linear-gradient(to top, black, white);
display : -webkit-box;
display : -webkit-flex;
display : -moz-box;
display : -ms-flexbox;
display : flex
}
:-ms-input-placeholder {
color : #ccc
}
::-moz-placeholder {
color : #ccc
}
::-webkit-input-placeholder {
color : #ccc
}
::placeholder {
color : #ccc
}Autoprefixer还可以自动删除过时的、不必要的前缀代码。
编译前：
div {
-webkit-border-radius : 5px;
border-radius : 5px
}编译后：
div {
border-radius : 5px
}因为经过Autoprefixer处理，CSS将仅保留实际的浏览器前缀。
Autoprefixer的安装和配置：
1、首先当然是安装node.js
参考我之前的那篇文章。
2、安装Autoprefixer
打开cmd控制台，输入下面一行npm命令，安装Autoprefixer模块：-g是全局安装，如果不加会安装在当前目录。
npm install autoprefixer -g
3、安装postcss-cli
Autoprefixer其实是postcss的插件，见：https://github.com/code42day/postcss-cli
npm install postcss-cli -g
4、配置External Tools
打开Webstorm设置，Preferences -> Tools -> External Tools，点击新增按钮，如图：
Name：autoprefixer
Tool settings：
Program： 找到AppData下的文件postcss.cm 若找不到AppData，在地址栏输入%appdata%回车，或者在用户名文件夹后输入AppData即可，如下图
Parameters：-u autoprefixer -o outputFile inputFile （-u 插件名称 -o 输出文件 输入文件，注意文件顺序输出文件及输入文件 ，输入文件需要先新建，不能自动生成）
Working directory：文件目录即可，可根据自己需要调整
我的配置：如果您是Windows用户，可以直接复制，注意：Deshun换成您的用户名
Program：C:\Users\Deshun\AppData\Roaming\npm\postcss.cmd
Parameters：-u autoprefixer -o $FileDir$/$FileName$ $FileDir$/$FileName$
Working directory：$ProjectFileDir$
5、在需要转换的文件点击右键->External Tools->autoprefixer ,即可生成新增兼容前缀的文件
由于Autoprefixer是CSS的后处理器，我们还可以将其与预处理器（如Sass，Stylus或LESS）一起使用。详情见：https://github.com/postcss/autoprefixer
注意：Autoprefixer不支持中文目录，并且路径中不能有空格，否则会报错：Input Error: You must pass a valid list of files to parse
未经允许不得转载：Web前端开发资源网 » 在Webstorm中使用Autoprefixer实现CSS自动补全
推荐阅读：