webstorm file watchers配置node-sass实时编译scss为css

前言

1. 在别人的项目基础上二次开发，别人未使用less或sass
2. 习惯node-sass的嵌套式写法及各种变量和模块引入
3. 不想额外引入gulp或webpack等打包工具
4. 不想每次开发前手动执行node-sass命令

所以配置idea的file watchers是最佳选择

一、配置说明

image.png

File type: 监听变化的文件类型（不是此类型，不监听）
Insert Macro：插入宏，就是提供一些文件名、路径等变量
Scope: 监听作用域（不在此作用域中的文件不监听）
Program: 主程序，如果node-sass在全局可用，直接写node-sass。如果不是全局可用，请写全路径。
Arguments: 参数，注意不要写-w --watch 因为file watchers已经进行监听，node-sass再进行监听会进入死循环。
Output paths to refresh: 输出后刷新文件

二、实时编译scss文件配置

Program: node-sass
Arguments: $FileName$ $FileNameWithoutExtension$.css
Output paths to refresh: $FileNameWithoutExtension$.css

三、实时编译scss目录到指定目录配置

Program: node-sass
Arguments: -r $ProjectFileDir$/css -o $ProjectFileDir$/dist
Output paths to refresh: $ProjectFileDir$/dist