webstorm使用postcss的Autoprefixer模块解决css浏览器兼容问题

一、插件安装

1、安装Autoprefixer
打开cmd控制台，输入下面一行npm命令，安装Autoprefixer模块：-g是全局安装，如果不加会安装在当前目录。

npm install autoprefixer -g

2、安装postcss-cli
Autoprefixer其实是postcss的插件

npm install postcss-cli -g

3、安装 postcss

npm install postcss -g

二、具体配置

找到webstorm的
setting -> Tools-> External Tools 点击新增按钮(+号)

Name：autoprefixer

Tool settings：

Program： 找到AppData下的文件postcss.cm 若找不到AppData，在地址栏输入%appdata%回车，或者在用户名文件夹后输入AppData即可，例如：C:\Users\666\AppData\Roaming\npm\postcss.cmd

Argument：postcss $FileName$ -u autoprefixer -o $FileName$ （输入文件 -u 插件名称 -o 输出文件 输入文件，注意文件顺序输出文件及输入文件 ，输入文件需要先新建，不能自动生成）
Working directory：$FileDir$当前文件文件目录

三、使用

选中css文件，右键

点击之后即可生成