Webstorm 中 SASS 环境配置的简易方法

在很多关于 Webstorm 的文章中都提到安装 Ruby 然后配置 SASS 开发环境，但是对于我来说 Ruby 的安装配置太过麻烦，在查阅 NPM 后发现 SASS 其实有一个 Node 版本。叫 node-sass 。利用其搭建了 Webstorm 的 SASS监听环境，非常快捷与方便。
在此做个记录：

安装 node-sass

利用 NPM 或 Yarn 安装 node-sass

npm install node-sass -g

Webstorm 上配置 SASS 监听器

添加 Compass SCSS 模板

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KljmKlNn-1587059494666)(http://oxnc5ug9u.bkt.clouddn.com/pic/180125/G0144a1mhH.png)]

Arguments 中填写相应的参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LiZabnVb-1587059494669)(http://oxnc5ug9u.bkt.clouddn.com/pic/180125/6GcgE17ijb.png)]
我这边的参数如下：

$FileName$ $FileParentDir$\css\style.css

因为 node-sass 的编译需要两个参数，第一个是输入的待编译SCSS文件，第二个参数是输出的CSS文件。

在Webstorm中 $FileName$ 是当前打开的文件，$FileParentDir$\css\style.css 是我编译输出的css文件路径与名称。

值得注意的是，$FileParentDir$ 是文件所在的文件夹的父级文件夹。

因为我的文件夹目录是这样的：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GKR0fSJE-1587059494672)(http://oxnc5ug9u.bkt.clouddn.com/pic/180125/i8IeimHcfc.png)]

我的项目叫Narours里面有个sass 文件夹,里面存放 scss 文件,那么按照这样配置的结果,main.scss 所在的文件夹就是 sass , sass 的父文件夹就是 Natours,编译后的 style.css 文件就会在这个 css 文件夹里。

接下来只要保存，即可自动编译SCSS了！

---

关注前端技术的小伙伴，欢迎点击扫描下面的二维码加入我建的 「前端开发交流群」，共同交流前沿前端技术。

---

我是空谷，独立产品经理、全栈设计师、全栈工程师。
技术栈为 React/Dva/Umi/Node/Egg/Electron
欢迎扫码加我微信交流，备注来源：CSDN