WebStorm、PHPStorm、IntelliJ IDEA配置scss自动编译

1、安装rubu环境

本文转自:https://www.edik.cn/article/61.html

1.下载ruby

由于sass依赖于ruby

下载地址：http://rubyinstaller.org/downloads

选择本身对应的操做系统下载

2.安装ruby

第二步的时候注意勾选第二项，是添加环境变量，后边都选择默认便可安装完毕。

2、安装sass

1.找到ruby命令行

从开始菜单中找到刚安装的ruby，点击Start Command Prompt with Ruby，打开命令行

2.安装sass

在命令行中输入如下命令，并回车

gem install sass

稍等片刻便会提示安装成功。若是不成功说明被墙了，请自行解决，反正个人正常安装了。

至此，准备工做完毕！

3、配置IDE

1.打开设置

打开IDE，依次打开File→Settings→File Watchers

注：IntelliJ IDEA中没有自带File Watchers插件，须要自行从插件中心下载（这个应该都会，实在有不会的请留言）

2.添加配置

点击右上角的绿色 “+” 号，并选择scss，如图

3.选择安装的sass

如图所示是sass的默认安装路径

4.编辑输出路径

个人设置是在当前路径下生成css，附上配置

--no-cache --update $FileName$:$FileNameWithoutExtension$.css

5.完成设置

点击OK完成配置

 

使用注意

1.同步编译只能在项目文件夹下，也就是webstorm左侧打开的项目，随便打开一个项目外的文件是不行的

 

2.目录名或文件名不要带中文