WebStorm配置Sass实现自动编译

一、Ruby安装

1.下载与安装

https://rubyinstaller.org/downloads/

WebStorm配置Sass实现自动编译_第1张图片

安装一路下一步即可,默认勾选的框勾选即可,不要更改

2.检测

ruby -v

在这里插入图片描述

3.更改Ruby源

3.1查看已经安装的source源

gem sources -l

WebStorm配置Sass实现自动编译_第2张图片

3.2更换国内的源

gem sources --add https://gems.ruby-china.com/  --remove https://rubygems.org/

WebStorm配置Sass实现自动编译_第3张图片

二、Sass安装

gem install sass

WebStorm配置Sass实现自动编译_第4张图片

gem install compass

WebStorm配置Sass实现自动编译_第5张图片

sass -v
compass -v

WebStorm配置Sass实现自动编译_第6张图片

三、WebStrom配置Sass

WebStorm配置Sass实现自动编译_第7张图片WebStorm配置Sass实现自动编译_第8张图片

$FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

WebStorm配置Sass实现自动编译_第9张图片
WebStorm配置Sass实现自动编译_第10张图片

你可能感兴趣的:(Win搭建开发环境,webstorm,sass,css)