本文根据
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
image.png
注意事项
千万记得路径或者项目名千万不能带中文!!!
千万记得路径或者项目名千万不能带中文!!!
千万记得路径或者项目名千万不能带中文!!!
关于中文的兼容笔者试了好几种解决方案均会在不同的场合报错,笔者也找不到好的解决方案,因此不要使用中文路径
如果你感觉这篇文章对你有帮助,请点赞收藏
你的支持是我最大的动力
