本文根据
windows 安装 Ruby 教程
[ webstorm 设置 sass自动编译问题
](https://www.cnblogs.com/fengh/archive/2018/11/03/9901138.html)在windows上安装ruby并配置sass踩坑
下面就开始吧

ruby下载和安装

windwos系统在https://rubyinstaller.org/downloads/
下下载RubyInstallers
√
然后在安装时记得勾选加入环境变量(Path)
√
安装过程贴图和windows 安装 Ruby 教程一样,这里就直接教程图了,一路没什么异常

√
安装完成后需测试安装有没有成功,运行CMD输入以下命令：

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

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

gem install sass

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

gem install compass

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

//更新sass
gem update sass//查看sass版本
sass -v

√

参数如下
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

注意事项

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

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

如果你感觉这篇文章对你有帮助,请点赞收藏
你的支持是我最大的动力
同步本文简书版https://www.jianshu.com/p/f092ea086547

[IDE]webstorm安装并配置sass踩坑(windwos)相关推荐

几乎完美安装！ NVIDIA Jetson Nano B01 Ubuntu 18.04.3 LTS 的 ROS 安装和菜鸟的踩坑记录【会继续完善】
几乎完美安装! NVIDIA Jetson Nano B01 Ubuntu 18.04.3 LTS 的 ROS 安装和菜鸟的踩坑记录 NVIDIA Jetson Nano B01技术规格 Ubuntu ...
alpine初始化配置和踩坑记录
alpine初始化配置和踩坑记录目录 alpine初始化配置和踩坑记录开启root登录SSH 官方配置工具修改DNS和apk源设置时区解决console字体太小并添加中文字体参考文献开启 ...
TX2 配置jupyterhub踩坑记录
TX2 配置jupyterhub踩坑记录问题描述: 参考教程1和教程2进行安装,报错提示如下(应该是连不上本地http://127.0.0.1:8001/api/routes).但使用lsof -i ...
Wampserver 下载安装！！！踩坑总结系列
Wampserver 下载安装!!!踩坑总结系列 WampServer的正确下载方法点我进入WampServer官网点击Sourceforge跳转后的页面如下如果提示"The page ...
Eclipse IDE的安装与配置
Eclipse IDE的安装与配置现在介绍如何安装Eclipse.与Intellij IDEA类似, Eclipse环境依赖于JDK与Scala的安装. JDK与Scala的安装前文已经详细讲述过了 ...
Vue2.0项目中使用sass(踩坑之路)
今天用2.0创建项目的时候,使用scss一直不成功,一直报错------ 记录一下,防止下次踩坑 1.安装依赖包 vue的webpack项目中需要安装上node-sass.sass-loader和st ...
linux下安装mysql5.7.11全纪录_简单几步在Linux环境下安装MySQL5.7(附踩坑记录)
在Linux下安装MySQL可以说是每个开发者必备的知识刚好我的服务器重装了一下因此重新安装了MySQL 写下本文特此记录下载MySQL的压缩包: 官网:https://dev.mysql.co ...
安装VM15搭建centos7踩坑记录。
项目经理又又又又又又又叕来找我做压测了,好吧这次连开发的机器都没法用了,因为开发也在用.上午问了一圈公司也没有16G内存的闲置电脑,所以明天只能把自己笔记本带来做服务器测试了.没法子,启动服务必须要1 ...
ios Universal Link 配置教程 + 踩坑记录
Univeral Link的配置有3方面:Apple Developer网站配置.XCode配置.服务器资源配置(apple-app-site-association文件创建和存放) 首先说下我们的需 ...
首次使用windows10安装DB2_10.5数据库踩坑全教程，附加问题解决目录思路汇总
新入职的IBM,需要安装IBM的数据库DB2,搞了两天踩坑全教程,下面是踩坑说明. DB2是IBM的数据库,官网说明是这个网址: IBM DocsIBM Documentation.https://w ...

[IDE]webstorm安装并配置sass踩坑(windwos)

ruby下载和安装

注意事项

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

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

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

[IDE]webstorm安装并配置sass踩坑(windwos)相关推荐

最新文章

热门文章