webstorm配置sass自动编译

以前一直在用hbuilder写代码，为了适应公司的项目进度，编译sass，便开始用webstorm，刚开始用就出现了快捷键失效的问题，赶紧百度找到了两个方法，这里放个截图就行，我用了第二个。

接下来就是设置自动编译sass了，我去百度了很多，各有各的说法，经过自己的慢慢调整，终于整明白了。

去官网下载ruby：https://rubyinstaller.org/downloads/

首先点击左上角的File→Settings→tools→File Watchers  ，

在弹窗的窗口的 右上角 点击绿色的 ‘+’ 号,然后选择scss。

Arguments：可以配置编译后的文件的输出路径,网上有很多种说法，但我试过了只有这样是对的:

--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css。

Output paths to refresh:因为我是一堆的scss通过引入的形式编译成一个bootstrap.css，所以我只能指定到css里面，

所以Output paths to refresh里面的内容就改成了这样:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

还有program，你点击后面那个文件夹它就会自动帮你找到了，其他的都是默认的，很省事。

到这里，基本上感觉很OK了，那是网上说的，但我每次保存都会出错。

报什么错呢？我也忘了，如果到了这里你还报错的话，就跟着我的步骤走吧，

找到Ruby的安装目录 ： C:\Ruby25-x64\lib\ruby\gems\2.5.0\gems\sass-3.7.4\lib\sass\importers,

打开    filesystem.rb  文件，找到下面这行代码，直接搜就搜到了：

更改为：name.encode("utf-8","gbk").index(@root + "/")

到了这里还是会报错，出现Invalid GBK character "\xE9"这种错误，造成这个问题的原因是，scss文件里出现了中文字符和注释，

打开ruby的安装文件，找到engine.rb文件，具体路径如下：

C:\Ruby25-x64\lib\ruby\gems\2.5.0\gems\sass-3.7.4\lib\sass，

然后在module sass 下面加上一行，Encoding.default_external = Encoding.find('utf-8')，

然后在你的所有的scss文件加上@charset "utf-8";，就OK了，如图：

到此，自动编译就成功了。