在webstorm中配置sass的自动编译，而且能够指定编译后的css的目录.

参考：

WebStorm-2018.2-Help-Sass, Less, and SCSS

 

做者：tobyDing
连接：https://www.jianshu.com/p/0fe52f149cab
來源：简书

 

本文前提是电脑里已经顺利安装了ruby,sass等以后，再进行webstorm中配置sass的watcher，以及改变watcher中的默认选项；若是以上都尚未作，能够自行百度解决，很容易找到的；

webstorm支持sass的同步编译,也就是即写即编译,而且能够指定编译后的css的目录.

本文使用的webstorm为11.0版本

点击左上角的File→Settings→File Watchers  

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

而后按照下图进行操做：

 

Watchers

 

其中黄色的地方都要填好，program那里是你安装ruby中响应的scss.bat的路径，若是安装ruby时，你不是按照默认c盘路径按装的话，那么那里是须要需改的；

按道理其中只有两个地方是须要修改的,其余我没有改过,都是默认就是那样的：

一、Arguments:

能够配置编译后的文件的输出路径,我这里写的是:

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

注意,$FileName$后面有个冒号,而后$FileParentDir$表示的是scss文件所在的文件夹的父级文件夹,而不是scss文件的父文件夹.

举个例子,个人项目叫lianxi,里面有个sass文件夹,里面存放scss文件,那么按照这样配置的结果,www.scss所在的文件夹就是sass,sass的父文件夹就是lianxi,而后找到lianxi下的css文件夹,编译后的www.css文件就会在这里.

如图所示：

 

文件结构

 

二、Output paths to refresh:

改为这样:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

通过以上配置就实现了，webstorm支持sass的同步编译,也就是即写即编译,而且能够指定编译后的css的目录.

这里须要注意两点：

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

2》这个和webstorm没有什么关系,就是sass编译不能带有中文,不管是路径名,文件名,文件里的内容,都不能识别中文,若是要修改它也不是不能够,但我以为不用中文也挺好的,养成好习惯嘛.

---

因为本人水平有限，时间仓促，疏漏之处在所不免，望读者包容！

不喜勿喷！

本文为UndefinedCheng原创文章，如想转载，请注明原文网址摘自于http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561，注明出处；

不然，禁止转载；谢谢配合！

做者：tobyDing 连接：https://www.jianshu.com/p/0fe52f149cab 來源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。