webstorm配置sass

最近用webstorm 做项目，使用create-react-app创建项目，安装node-sass-chokidar， 使用命令行来将sass转换为css，不尽人意的是，在vscode 可以正常使用，到了webstorm ,TM 一直不会自动编译。尝试了很多种办法

好吧，只能使用webstorm 自动把sass编译编译成css了。
有两种路径可以使用 node-sass

第一种，下载使用 ruby进行安装

步骤：

1.下载Ruby，Window系统下，我们可以使用RubyInstaller 来安装 Ruby 环境，ruby下载地址
2.使用Ruby安装sass
3.检测是否安装成功。命令行输入 sass -v
4、webstorm 里面进行配置， 新建sass文件，在同目录下会生成css文件
详细过程，这篇博客写的很清楚，我是借鉴他的，可以成功运行

第二种：直接使用npm或者yarn

1. 使用命令行 npm install node-sass -g
2. 等待下载成功之后，打开webstorm --> file --> setting–> file watch–> 找到右边的 +添加 scss
   

3.这里的$FileNameWithoutExtension$设置生成的文件名与scss文件一样,注意： 这里的$FileName$ $FileParentDir$\css\$FileNameWithoutExtension$.css 里面的 $FileParentDir$ 指的是我当前文件夹的父文件夹
整个命令的意思就是在当前文件夹的父文件夹下面生成一个css 文件夹，并且添加 跟 .scss文件 同名的 css文件

4.新建文件夹sass 在里面添加.scss文件，就会在目录下CSS文件夹生成的.css文件