windows下安装Sass编译环境

由于Sass是基于Ruby语言开发的，所以首先要安装Ruby

Ruby环境安装

1. 外网下载地址：https://rubyinstaller.org/downloads/ ，如无翻墙，可网盘自取：链接:https://pan.baidu.com/s/1mNAp-qze13yWfTN55QVwDQ 提取码:7b4o
2. 下载 rubyinstaller 之后，解压到新创建的目录下：
3. 双击 rubyinstaller-2.2.3.exe 文件，启动 Ruby 安装向导。
4. 点击 Next，继续向导，记得勾选 Add Ruby executables to your PATH，直到 Ruby 安装程序完成 Ruby 安装为止。

安装后执行以下代码可查看版本号

ruby -v

由于国内网络原gem源连接不稳定，所以移除原gem源，添加国内源：

// 移除gem源
gem sources --remove https://rubygems.org/
// 添加国内源
gem sources -a https://gems.ruby-china.com

安装Sass

gem install sass

IDEA设置Sass编译

1. 在Plugins组件中搜索file watchers，如果没有就点击下面按钮“Install JetBrains plugins”，搜索“file watchers”安装并重启idea。

   
   
   image.png

2. 在Tools中，找到file watchers,配置scss编译

   
   
   image.png

program：看你ruby安装在哪个盘，找到ruby文件夹，\bin\sass.bit(sass依赖于ruby，所以必须先安装ruby，然后在cmd中查看ruby是否安装成功，ruby -v，安装成功后，安装sass，指令是 gem install sass，之后会显示sass安装成功)

arguments：--no-cache --update :\css$FileNameWithoutExtensionFileParentDirFileParentDir(sass)$ -- sass文件所在的文件夹）

output paths to refresh：.css（只输出css文件）