ruby与scss环境搭建

要在webstorm或者vscode上使用scss并且使之可以编译,都要先安装ruby环境。

所以第一步都是下载安装ruby环境。

一、下载安装ruby、scss

1.打开ruby官网下载网址:http://rubyinstaller.org/downloads/

2.选择需要下载的版本。

我掉过的坑:

我下载安装过:

ruby与scss环境搭建_第1张图片

这两个版本安装完成之后会有一个弹窗,让你继续选择。以至于这两个版本我都安装失败了。

后来安装了Ruby 2.3.3 (x64) 这个版本才安装成功,安装过程中会有三个勾选,最好都选上。

ruby与scss环境搭建_第2张图片

3.打开命令行,检测ruby是否安装成功


4.安装sass


二、在webstorm中配置scss

我最终想要形成的效果是css在一个文件夹,scss在一个文件夹。就像下图的绿框中的效果。

如果需要这种效果,可以按如下步骤设置。

ruby与scss环境搭建_第3张图片

1.依次在webstorm中选择

file -> settings -> File Wathers -> 添加scss开始配置

2.将Arguments改为:

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

3.将output Path改为:

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

三、在vscode下配置scss

安装好ruby环境之后,vscode下的scss配置就相对来说简单一些,直接在应用中下载插件‘easy sass’

ruby与scss环境搭建_第4张图片

拆件安装成功之后会自动编译scss并在同级文件夹中生成css文件。

ruby与scss环境搭建_第5张图片

(scss文件夹是自己建立,demo.scss文件是自己建立,demo.css和demo.min.css是自动编译生成)

你可能感兴趣的:(环境配置)