webstorm监听scss文件生成.css文件、监听.css文件生成.min.css文件

1、webstorm监听scss

File =>> setting =>>Tools =>> File Watchers =>> +scss

1)Program:

Ruby安装位置C:\Ruby26-x64\bin\sass.bat

$FileParentDir表示的是scss文件所在的文件夹的父级文件夹
2)Arguments:

可以选择压缩方式
--no-cache --update -t compressed $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

无压缩方式
--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

3)Output paths to refresh:
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

4)其他注意事项

@charset "UTF-8";  //记得添加这句使得支持中文

// 宽度百分比的书写方式
@each $percent in 5, 10, 15, 20, 25{
    .percent-#{$percent}{width: $percent * 1%};
}

2、监听css/js文件生成压缩文件

File =>> setting =>>Tools =>> File Watchers =>> +YUI Compressor CSS/YUI Compressor JS =>>Programs选择下载的yui compressor 的jar包的路径，其他默认不改