webstorm scss 自动编译添加css3前缀

sass或者scss编译为css时，webstorm配置如下：（http://www.cnblogs.com/phoenix-smile/p/5063216.html） 如果没有安装ruby则先安装，下载地址：http://rubyinstaller.org/downloads 安装注意： 1.安装ruby，此步骤只需留意勾选Add Ruby executables to your PATH这个选项，它将添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境，影响Webstorm 自动编译。 2.安装后，在开始菜单找到Start Command Prompt with Ruby 3.安装scss 命令为：gem install sass 4.安装Autoprefixer，是不是全局安装（-g）那就看你自己的环境了 命令为：npm install autoprefixer -g 5.安装postcss-cli，Autoprefixer其实是postcss的插件 命令为：npm install postcss-cli -g 6.配置webstorm-autoprefixer 打开Webstorm设置，File -> settings -> Tools -> File Watcher ;点击新增按钮 7.修改Arguments，默认输出到scss文件同目录，建议修改到其他位置，（7.1或7.2任选） 7.1修改到上一级的stylesheets目录下 修改前--no-cache --update $FileName$:$FileNameWithoutExtension$.css 修改后--no-cache --update $FileName$:$FileParentDir$\stylesheets\$FileNameWithoutExtension$.css 7.2修改到指定css目录下，从项目根目录开始找 修改前 Arguments:--no-cache --update $FileName$:$FileNameWithoutExtension$.css Output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map 修改后（本项目） Arguments:--style expanded --no-cache --update $FileName$:$ProjectFileDir$/webAppModal/assets/style/css/$FileNameWithoutExtension$.css Output paths to refresh:$ProjectFileDir$/webAppModal/assets/style/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/webAppModal/assets/style/css/$FileNameWithoutExtension$.css.map 8.配置autoprefixer File->Tools->External Tools 点击add Name:Autoprefixer description:Autoprefixer Program:C:\Program Files\nodejs\node_global\postcss.cmd Parameters:-u autoprefixer -o $FileDir$/$FileName$ $FileDir$/$FileName$ Working directory:$ProjectFileDir$ 其余默认不变 参考链接：http://jingyan.baidu.com/article/3c343ff7e0a39d0d3779633c.html