npm及webstrom(自动)编译scss全攻略(输出路径)

1. Ruby安装

SCSS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SCSS。
推荐使用https://rubyinstaller.org/downloads/上下载的Windows一键安装包:)
安装包路径（64位）： https://dl.bintray.com/oneclick/rubyinstaller/rubyinstaller-2.3.3-x64.exe
安装包路径（32位）：https://dl.bintray.com/oneclick/rubyinstaller/rubyinstaller-2.3.3.exe

这里写图片描述
注意：记得勾选图示两个选项

安装完成后，在cmd里面运行 ruby -v显示当前的安装版本。

这里写图片描述

2. Sass安装(正常安装)

安装完ruby后，可以直接在命令行里面输入gem install sass安装Sass
这里写图片描述
sass -v 查看版本

到此，所有的安装都结束了。接下来我们就可以直接编译sass文件了

2.1 Sass安装(被墙了)

 若由于墙的原因被安装失败，建议切换下载源继续下载，步骤如下：

查看gem 的源

  gem sources

可以看到它的源是
https://rubygems.org/ （这就是国外的源）
- 先用命令删除这个源

gem sources -r https://rubygems.org/

删除成功后，再用命令新增一个源淘宝的源（https://gems.ruby-china.com）

gem sources -a https://gems.ruby-china.com

新增失败的话，是由于Windows 下证书无法验证问题

ruby 没有包含 SSL 证书，所以 https 的链接被服务器拒绝。
解决方法很简单，首先在这里下载证书 http://curl.haxx.se/ca/cacert.pem, 然后再环境变量里设置 SSL_CERT_FILE 这个环境变量，并指向 cacert.pem 文件。
新增成功后，更新一下

gem sources -u

3. Sass编译(非监听)

打开cmd命令行，切换到scss文件所在目录，执行
sass style.scss style.css,
就可以将style.scss文件编译成style.css文件

4. 利用npm实现scss的自动编译

举个例子：
创建一个demo文件夹，里面有两个文件夹，分别为css和scss，scss有个scssName.scss文件，需求：需要监听他实现自动编译
文件目录如下图：
这里写图片描述
在demo目录进入cmd 使用：

sass --watch scss/scssName.scss:css/outpu.css

这里写图片描述
如上图所示，已经开始监听自动编译中。
效果如下：

编译结果

重点内容
为了日后开发方便，我们可以创建一个bat文件，如图，更方便快捷，双击点开就能使用。

5.利用webstrom实现scss的自动编译
webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录.
本文使用的webstorm为2017.3.5版本
点击左上角的File→Settings→File Watchers
点右上角加号选择scss
这里写图片描述

- program

program那里是你安装ruby中响应的scss.bat的路径，如果安装ruby时，你不是按照默认c盘路径按装的话，那么那里是需要需改的；

- Arguments

可以配置编译后的文件的输出路径,我这里写的是:

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

注意, $FileName$ 后面有个冒号,然后 $FileParentDir$ 表示的是scss文件所在的文件夹的父级文件夹,而不是scss文件的父文件夹.

举个例子,我的项目叫lianxi,里面有个sass文件夹,里面存放scss文件,那么按照这样配置的结果,www.scss所在的文件夹就是sass,sass的父文件夹就是lianxi,然后找到lianxi下的css文件夹,编译后的www.css文件就会在这里.
这里写图片描述

本文搬运于https://www.jianshu.com/p/0fe52f149cab