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

一、安装rubu环境

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

1.下载ruby

因为sass依赖于ruby

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

选择自己对应的操作系统下载

2.安装ruby

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

安装ruby

二、安装sass

1.找到ruby命令行

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

ruby命令行

2.安装sass

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

gem install sass

稍等片刻便会提示安装成功。如果不成功说明被墙了，请自行解决，反正我的正常安装了。

至此，准备工作完毕！

三、配置IDE

1.打开设置

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

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

2.添加配置

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

添加配置

3.选择安装的sass

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

sass安装路径

4.编辑输出路径

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

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

输出路径

5.完成设置

点击OK完成配置

使用注意

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

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