为WebStorm设置SASS的File Watchers

桃扇骨 2022-06-08 11:28 250阅读 0赞

下面就是在WebStorm设置SASS的File Watchers的步骤(限window系统)：

##### 1. 安装Ruby #####

[http://www.rubyinstaller.org/][http_www.rubyinstaller.org]，去这里下载，然后安装（只管点击next即可）。安装过程中注意勾选上第二项！即将Ruby加入到可执行的环境变量中去，第一个选项可以不用选。  
![这里写图片描述][SouthEast]

安装结束后在命令行中运行 ruby -v 能看到对应的版本则说明安装正确。

##### 2. 安装Sass #####

安装好Ruby后，打开CMD命令，输入：

> gem install sass

注意：

这里有可能安装没反应或提示网络错误什么的。解决办法是使用淘宝的Ruby gem镜像：

$ gem sources –remove [https://rubygems.org/][https_rubygems.org]  
$ gem sources -a [https://ruby.taobao.org/][https_ruby.taobao.org]  
$ gem sources -l  
**\* CURRENT SOURCES \***  
[https://ruby.taobao.org][https_ruby.taobao.org 1]  
如果我们看到最后显示的地址只有国内淘宝提供的镜像地址就OK了  
**请确保只有 ruby.taobao.org**  
$ gem install sass

完成后输入sass –v 就会返回sass的版本号。

OK以后，在webstorm里面选择本机ruby目录下bin目录里面的scss.bat文件（如果需要编译SASS文件则选择sass.bat）

##### 3. 设置Webstorm #####

上面都安装没问题以后，就可以设置Webstorm了。

> 下面的输出参数，可以根据自己的需要填写，下面列出的是一些常用的参数
> 
>  *  style表示解析后的css是什么格式，如：–style compressed，有四种取值分别为：nested，expanded，compact，compressed.
>  *  sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。 webstorm是默认开启sourcemap的，所以可以不填写
>  *  debug-info表示开启debug信息，升级到3.3.0之后因为sourcemap更高级，这个debug-info就不太用了。

根据如下路径打开 WebStrom 的配置：

> File > Settings > Tools > File Watchers

选择右边的 `+` 号，在弹出界面点击你想要添加的 Watcher， Sass 或是 Scss，我现在使用的是 Scss 。  
![这里写图片描述][SouthEast 1]

Arguments 中的配置信息如下：

> –no-cache –update $FileName$:$FileNameWithoutExtension$.css –style expanded

[http_www.rubyinstaller.org]: http://www.rubyinstaller.org/
[SouthEast]: /images/20220608/870f0a33c5cf45bd8dbf956aea0f9e6c.png
[https_rubygems.org]: https://rubygems.org/
[https_ruby.taobao.org]: https://ruby.taobao.org/
[https_ruby.taobao.org 1]: https://ruby.taobao.org
[SouthEast 1]: /images/20220608/21c90e3bf85e45a496787489c64e65bf.png