webstorm 配置scss

webstorm 配置scss
1.安装ruby
2.安装好ruby后安装scss
3.scss安装成功后配置webstorm里的scss

–no-cache --update $FileName$:$FileParentDir$\css$FileNameWithoutExtension$.css --style expanded
$FileName$后面有个冒号,然后$FileParentDir$表示的是scss文件所在的文件夹的父级文件夹,而不是scss文件的父文件夹.
举个栗子,我的项目叫sass-learn,里面有个scss文件夹,里面存放scss文件,那么按照这样配置的结果,style.scss所在的文件夹就是scss,scss的父文件夹就是sass-learn,然后找到sass-learn下的css文件夹,编译后的style.css文件就会在这里.如下图：