在idea中使用scss编译出css文件

在idea中使用scss，并实时编译生成css文件

近来写项目多用idea，本人写样式超级依赖scss，没有它修改样式的时候很痛苦。在vscode和idea中切来切去，感觉有点麻烦。于是选择在idea中配置好scss.

首先安装ruby

Downloads (rubyinstaller.org)

我的电脑是64位，安装的是下面这个

安装过程中，一定要勾选这一项，其他直接next。

安装完成后在命令行输入

ruby -v

检查是否安装成功，出现版本号，就是安装成功了。

ruby安装成功后，安装compass，命令行输入

gem install compass

（这个安装的时候有点慢，需要稍等一两分钟）

然后compass -v检查是否安装成功以及版本信息

安装normalize，命令行输入

gem install compass-normalize

安装sass，命令行输入

gem install sass

然后sass -v 检查是否安装成功以及版本信息

然后在idea中安装插件File Watcher

接下来就是设置

其中：

    Program选择步骤3中Ruby路径中，bin目录下的scss.bat文件。

    Argument部分选择: --no-cache --update --watch $FileDir$

    Output paths to refresh选择: $FileDir$:$FileNameWithoutExtension$.css

    这三个参数不是一定需要这么写，因为$ $之间带不同的参数表示不同的意思。如果啊，我是说如果，你真的不想去理解$里面不同参数代表的意思，你用绝对路径也是能办到的。。当然这种就只能用在你这一个project中了。

    这个是官方的new watchers的文档，里面都有记录，有兴趣的了解了解
     https://www.jetbrains.com/help/idea/2020.2/new-watcher-dialog.html。

结束语：
经过这两天的运用吧，我觉得在idea中用scss真的不如我在VScode中使用，体验感没有vscode好，再加上在idea中我还要提交项目，scss编译后的css文件又在scss的子目录（这个应该可以设置）。总之觉得我不如用VScode。又是一次试错体验。