版权声明：本文为空谷原创文章，未经博主允许不得转载。如需转载请添加微信：kongguxs001 https://blog.csdn.net/simplehouse/article/details/79160131
在很多关于 Webstorm 的文章中都提到安装 Ruby 然后配置 SASS 开发环境，但是对于我来说 Ruby 的安装配置太过麻烦，在查阅 NPM 后发现 SASS 其实有一个 Node 版本。叫 node-sass 。利用其搭建了 Webstorm 的 SASS监听环境，非常快捷与方便。
在此做个记录：
安装 node-sass
利用 NPM 或 Yarn 安装 node-sass
npm install node-sass -gWebstorm 上配置 SASS 监听器
添加 Compass SCSS 模板
Arguments 中填写相应的参数
我这边的参数如下：
$FileName$ $FileParentDir$\css\style.css因为 node-sass 的编译需要两个参数，第一个是输入的待编译SCSS文件，第二个参数是输出的CSS文件。
在Webstorm中 $FileName$ 是当前打开的文件，$FileParentDir$\css\style.css 是我编译输出的css文件路径与名称。
值得注意的是，$FileParentDir$ 是文件所在的文件夹的父级文件夹。
因为我的文件夹目录是这样的：
我的项目叫Narours里面有个sass 文件夹,里面存放 scss 文件,那么按照这样配置的结果,main.scss 所在的文件夹就是 sass , sass 的父文件夹就是 Natours,编译后的 style.css 文件就会在这个 css 文件夹里。
接下来只要保存，即可自动编译SCSS了！