目录
1、IntelliJ IDEA中安装File Watchers
2、Ruby安装
2.1 为啥要安装Ruby？
2.2 安装流程
3、SASS安装
4、File Watchers配置
5、不需要File Watchers的自动转换
补充：官方文档.scss转.css流程。
https://www.jetbrains.com/help/idea/transpiling-sass-less-and-scss-to-css.html#sass_scss_less_before_you_start
安装流程都是我个人的亲自实现的，找了比较多的方法，也参考了许多博客和官方文档。供大家参考学习。我的IDEA版本是2020.1 Ultimate Edition。
1、IntelliJ IDEA中安装File Watchers
一般情况下，是在IDEA中的左上角，File --> settings --> plugins，或者直接按ctrl+shift+s，在插件中搜索File Watchers，直接安装即可。
当然，有时候出于某些原因，plugins中加载不出来插件，这里给出另外一种方法下载File Watchers。
首先就是IntelliJ IDEA的官方插件网站https://plugins.jetbrains.com/。在官方的网站中搜索File Watchers。
我最开始是在version中查找适合自己IDEA版本的File Watchers。如果你下载的File Watchers.jar跟你的IDEA版本不合适，IDEA会报错。
提示错误：Plugin 'File Watchers' is incompatible with this installation
当然如果右侧有如图所示的蓝色部分Install to IntelliJ IDEA 2020.1，直接点击蓝色部分，官方网站会自动匹配适合你的IDEA的插件。要是没有官方匹配，就只能自己在Versions中找到适合自己IDEA版本的插件，下载.jar文件自行安装。
如果是自己下载插件，安装.jar插件文件有两种方法，第一种就是直接把.jar文件拖入IDEA页面；第二种就是在plugins右边的设置中选择Install plugins from Disk。找到下载的插件。
完成上述操作后，基本上都可以安装File Watchers了，当然可能也有一些我没遇到的问题。如何判断是不是安装File Watchers成功，在settings --> Tools中找到是否有File Watchers。如果有则表示安装成功。
一般情况下，是在IDEA中的左上角，File --> settings --> plugins，或者直接按ctrl+shift+s，在插件中搜索File Watchers，直接安装即可。
当然，有时候出于某些原因，plugins中加载不出来插件，这里给出另外一种方法下载File Watchers。
首先就是IntelliJ IDEA的官方插件网站https://plugins.jetbrains.com/。在官方的网站中搜索File Watchers。
我最开始是在version中查找适合自己IDEA版本的File Watchers。如果你下载的File Watchers.jar跟你的IDEA版本不合适，IDEA会报错。
提示错误：Plugin 'File Watchers' is incompatible with this installation
当然如果右侧有如图所示的蓝色部分Install to IntelliJ IDEA 2020.1，直接点击蓝色部分，官方网站会自动匹配适合你的IDEA的插件。要是没有官方匹配，就只能自己在Versions中找到适合自己IDEA版本的插件，下载.jar文件自行安装。
如果是自己下载插件，安装.jar插件文件有两种方法，第一种就是直接把.jar文件拖入IDEA页面；第二种就是在plugins右边的设置中选择Install plugins from Disk。找到下载的插件。
完成上述操作后，基本上都可以安装File Watchers了，当然可能也有一些我没遇到的问题。如何判断是不是安装File Watchers成功，在settings --> Tools中找到是否有File Watchers。如果有则表示安装成功。
按道理安装成功后，是进行配置和自动编译，但是还缺少几个比较关键的部分。
2、Ruby安装
2.1 为啥要安装Ruby？
我查资料有说是sass是用Ruby语言写的，并且在最后配置的时候需要sass.bat。安装sass也需要提前安装Ruby。
2.2 安装流程
还有一个相关的网站https://sass-lang.com/。网站中对于安装什么的有介绍。但是吧，英文网站么，好多人也不爱看。就写一下我自己安装的流程和遇到的问题。
首先是Ruby的官方网站：https://rubyinstaller.org/downloads/archives/。我是在网站比较靠近下面的地方选择了RubyInstallers。版本随便选，个人比较建议选择后缀名为x64的。至于原因，我也不知道到，只是因为选择x86的会跳转github。下载的exe文件也不大，大概15MB左右，下载速度比较慢。当然你有加速的方法也可以使用。
下载了软件就进行安装吧，安装流程非常的简单，注意在安装路径选择页面，把下面的三个对勾都打上，这样也避免了安装好了自己添加环境变量的问题。
这里呢强烈建议在官方下载，不要去一些免费的网站下载，那样容易安装失败，并且出现SSL问题，解决起来就非常棘手，不划算。
3、SASS安装
完成步骤2后，分别确定一下ruby和gem是不是安装成功了。在cmd中运行。
ruby -v
gem -v
如果安装成功，运行ruby -v和gem -v会出现安装的版本号。如果都安装成功，接下来进行SASS的安装。
直接运行gem install sass。
gem install sass
如果呀，运行gem install sass后，不是进行sass安装。而是提示各种错误。比如
错误1:
ERROR: Could not find a valid gem 'sass' (>= 0), here is why: Unable to down... 等等问题。
网络上给出的解决方法是替换淘宝镜像，替换http://rubygems.org等等。说实话，解决不了，镜像可能失效了。
错误2：
ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError) SSL_connect...
SSL证书出问题了，这个是替换了替换http://rubygems.org后出现的问题。
其实导致的原因就是Ruby安装的方式不正确，官方安装包安装的Ruby没有这些问题，所以，去官方下载！
推荐一个国内的RubyGems网站，https://gems.ruby-china.com/。
检测sass是否安装成功的方法是在cmd中运行sass -v。
sass -v
如果安装成功会出现安装的sass的版本。
4、File Watchers配置
安装好Ruby和sass后，进入步骤1中的最后那部分，点击add，如图所示。
当然，图中的add被水印挡住了，凑合着看看。。知道在哪就好，就reset下面那个加号。
加号点击后会有多个选项，选择SCSS，因为我自己的需求是将.scss自动编译为.css。
创建之后，出现New Watcher界面，在界面中对Tool to Run on Changes部分进行配置。
其中：
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
5、不需要File Watchers的自动转换
其实你也发现了，步骤4里面的配置太麻烦了，参数太多了，看着都头疼。有个更简便的方法，只需要步骤2和步骤3，不需要1和4。
首先，在cmd或者git bash中 cd到你的project的.scss目录下。其次，直接输入
scss --watch abc.scss:def.css
其中abc就是指你自己需要转化的.scss文件，def指保存的.css的文件名。当然，这种写法是两个文件都在同一个目录下，如果你想添加不同的路径下的文件，你可以试试，我个人觉得是可以的哈，没有尝试过。
运行代码后，就开始了自动转换了，如果需要停止转换，直接ctrl+c就停止了。
2.1 为啥要安装Ruby？
我查资料有说是sass是用Ruby语言写的，并且在最后配置的时候需要sass.bat。安装sass也需要提前安装Ruby。
2.2 安装流程
还有一个相关的网站https://sass-lang.com/。网站中对于安装什么的有介绍。但是吧，英文网站么，好多人也不爱看。就写一下我自己安装的流程和遇到的问题。
首先是Ruby的官方网站：https://rubyinstaller.org/downloads/archives/。我是在网站比较靠近下面的地方选择了RubyInstallers。版本随便选，个人比较建议选择后缀名为x64的。至于原因，我也不知道到，只是因为选择x86的会跳转github。下载的exe文件也不大，大概15MB左右，下载速度比较慢。当然你有加速的方法也可以使用。
下载了软件就进行安装吧，安装流程非常的简单，注意在安装路径选择页面，把下面的三个对勾都打上，这样也避免了安装好了自己添加环境变量的问题。
这里呢强烈建议在官方下载，不要去一些免费的网站下载，那样容易安装失败，并且出现SSL问题，解决起来就非常棘手，不划算。
完成步骤2后，分别确定一下ruby和gem是不是安装成功了。在cmd中运行。
ruby -v gem -v如果安装成功，运行ruby -v和gem -v会出现安装的版本号。如果都安装成功，接下来进行SASS的安装。
直接运行gem install sass。
gem install sass如果呀，运行gem install sass后，不是进行sass安装。而是提示各种错误。比如
错误1:
ERROR: Could not find a valid gem 'sass' (>= 0), here is why: Unable to down... 等等问题。
网络上给出的解决方法是替换淘宝镜像，替换http://rubygems.org等等。说实话，解决不了，镜像可能失效了。
错误2：
ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError) SSL_connect...
SSL证书出问题了，这个是替换了替换http://rubygems.org后出现的问题。
其实导致的原因就是Ruby安装的方式不正确，官方安装包安装的Ruby没有这些问题，所以，去官方下载！
推荐一个国内的RubyGems网站，https://gems.ruby-china.com/。
检测sass是否安装成功的方法是在cmd中运行sass -v。
sass -v如果安装成功会出现安装的sass的版本。
4、File Watchers配置
安装好Ruby和sass后，进入步骤1中的最后那部分，点击add，如图所示。
当然，图中的add被水印挡住了，凑合着看看。。知道在哪就好，就reset下面那个加号。
加号点击后会有多个选项，选择SCSS，因为我自己的需求是将.scss自动编译为.css。
创建之后，出现New Watcher界面，在界面中对Tool to Run on Changes部分进行配置。
其中：
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
5、不需要File Watchers的自动转换
其实你也发现了，步骤4里面的配置太麻烦了，参数太多了，看着都头疼。有个更简便的方法，只需要步骤2和步骤3，不需要1和4。
首先，在cmd或者git bash中 cd到你的project的.scss目录下。其次，直接输入
scss --watch abc.scss:def.css
其中abc就是指你自己需要转化的.scss文件，def指保存的.css的文件名。当然，这种写法是两个文件都在同一个目录下，如果你想添加不同的路径下的文件，你可以试试，我个人觉得是可以的哈，没有尝试过。
运行代码后，就开始了自动转换了，如果需要停止转换，直接ctrl+c就停止了。
安装好Ruby和sass后，进入步骤1中的最后那部分，点击add，如图所示。
当然，图中的add被水印挡住了，凑合着看看。。知道在哪就好，就reset下面那个加号。
加号点击后会有多个选项，选择SCSS，因为我自己的需求是将.scss自动编译为.css。
创建之后，出现New Watcher界面，在界面中对Tool to Run on Changes部分进行配置。
其中：
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
其实你也发现了，步骤4里面的配置太麻烦了，参数太多了，看着都头疼。有个更简便的方法，只需要步骤2和步骤3，不需要1和4。
首先，在cmd或者git bash中 cd到你的project的.scss目录下。其次，直接输入
scss --watch abc.scss:def.css其中abc就是指你自己需要转化的.scss文件，def指保存的.css的文件名。当然，这种写法是两个文件都在同一个目录下，如果你想添加不同的路径下的文件，你可以试试，我个人觉得是可以的哈，没有尝试过。
运行代码后，就开始了自动转换了，如果需要停止转换，直接ctrl+c就停止了。
结束咯，就可以直接在.scss中写代码，自动转换啦~
