webstorm自动编译scss

资源来源：https://blog.csdn.net/wytbr666/article/details/77477182

官网安装Ruby很慢: https://rubyinstaller.org/downloads/

我已在官方下载：http://zhizous.gitee.io/file/app/rubyinstaller-2.7.2-1-x64.exe

• 安装成功后，用命令进行检查，成功会显示版本信息

  ruby -v
  gem -v

修改rubygems的source源

$ gem source -r http://rubygems.org/
$ gem source -r http://production.s3.rubygems.org/
增加新source源
$ gem source -a http://production.s3.ru

如果使用Bundler

修改你的 Gemfile 将 http://rubygems.org 改为 http://ruby.taobao.org/

来源：
http://blog.banban.me/blog/2012/03/26/she-zhi-gemyuan-%2Cjie-jue-xia-zai-man-de-wen-ti/

• 1
• 2

• 安装sass

在命令行输入：

gem install sass

• 1

• 安装成功后，在D:Ruby23-x64in里面会有scss.bat的文件

• 在webstorm中添加Watcher

• File -> Settings -> Tools -> File Watchers -> + -> SCSS

1、Arguments:配置编译后的文件的输出路径:

--no-cache --update --sourcemap watch $FileName$:$FileParentDir$css$FileNameWithoutExtension$.css

• 1

2、Output paths to refresh:

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map