webstrom配置sass和scss

2018年5月13日亲测可用

1.安装Ruby，在官网找个版本下载即可。记下安装路径，eg: D:\Ruby

打开cmd命令提示符工具:win+R->输入cmd；

输入以下命令回车后，进入d盘:

d:

进入ruby的安装目录

cd D:\ruby

这时就可以输入Ruby命令了，例如查看Ruby的版本:

gem -v

2.使用Ruby安装sass

输入命令

gem install sass

回车后，就可以看到install successful的提示，表示已经安装成功。gem包的默认位置在Ruby安装目录下\lib\ruby\gems\2.5.0\gems，可以找到已经下载好的sass包，也可以通过:

sass -v

可以查看sass的版本

这时，我们就可以通过sass来将sass文件编译成css文件了:

我们将E盘下的style.sass编译成css，同样放到E盘，命令为:

sass E:\style.sass E:\style.css

3.webStrom 配置sass

首先，打开file watchers:

依次点击:file>setting>Tools>file watchers

点击右面的+，选择sass（如果是配置scss就选择scss）

点击program的浏览文件按钮

选中如下的文件即可(我用的webstrom是自动选中的)

4.测试

新建styleSheet文件，选择sass后，随便回车保存就可以看到会自动生成对应的css文件。