本文根据
windows 安装 Ruby 教程
webstorm 设置 sass自动编译问题
在windows上安装ruby并配置sass踩坑
下面就开始吧

---

ruby下载和安装

windwos系统在https://rubyinstaller.org/downloads/
下下载RubyInstallers
√
然后在安装时记得勾选加入环境变量(Path)

image.png
√
安装过程贴图和windows 安装 Ruby 教程一样,这里就直接教程图了,一路没什么异常
image.png
√
安装完成后需测试安装有没有成功,运行CMD输入以下命令：

where ruby
//如安装成功会打印
C:\Ruby26-x64\bin\ruby.exe

如上已经安装成功，Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。
√
接下来直接安装sass,本人在安装时并没有https的问题加无法访问淘宝源的问题,因此直接在CMD里输入安装sass的命令

gem install sass 

image.png

看到Successfully installed sass-3.7.4就可以了
然后是安装Compass命令

gem install compass

image.png

然后就安装完成啦,我们可以通过以下命令确认最新版安装正确

//更新sass
gem update sass

//查看sass版本
sass -v

image.png
√
image.png
参数如下
File Type 配置为 Scss Style Sheet ,不要配置为 SASS style sheet
Progarm: Ruby SaSS 扩展路径可以在cmd里用where sass获取

C:\Users\szh>where sass
C:\Ruby26-x64\bin\sass
C:\Ruby26-x64\bin\sass.bat

C:\Users\szh>where sass
C:\Ruby26-x64\bin\sass
C:\Ruby26-x64\bin\sass.bat

Arguments:配置编译参数
格式:

--no-cache --update -t compact $FileName$:$FileNameWithoutExtension$.css

本人使用的:

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

-t 后面有4种参数可选：

• 嵌套输出方式 nested 它是默认值
• 展开输出方式 expanded
• 紧凑输出方式 compact

压缩输出方式 compressed 生产环境当中一般使用这个
Output paths to refresh：文件输出路径

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

然后就可以愉快的开始编码了w image.png

注意事项

千万记得路径或者项目名千万不能带中文!!!

千万记得路径或者项目名千万不能带中文!!!

千万记得路径或者项目名千万不能带中文!!!

关于中文的兼容笔者试了好几种解决方案均会在不同的场合报错,笔者也找不到好的解决方案,因此不要使用中文路径

---

如果你感觉这篇文章对你有帮助,请点赞收藏
你的支持是我最大的动力