Webstorm编译scss（基于Ruby）

在很早之前的一篇文章，讲了用node-sass来编译，参考：https://cloud.tencent.com/developer/article/1538301

今天来讲讲使用ruby来编译。

下载

下载ruby：https://rubyinstaller.org/downloads/archives/

选择RubyInstallers里面的文件：

下载完成：

安装

然后之后会有一个微软的什么东西(MSYS2)安装：

我这里选择1了。

检测

打开命令行，输入gem -v

更换gem源

删除原gem源：

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

添加淘宝镜像源：

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

安装sass

gem install sass

结果：

安装完成，就应该在ruby的安装目录下的bin目录下有一个sass.bat文件：

这会导致你可以命令行输入

sass -v

Webstorm设置

以上步骤就成功安装sass了，然后接下来就是在Webstorm中如何使用了。

找到设置

路径：File | Settings | Tools | File Watchers

然后需要配置参数：

Program

安装sass的目录，也即我之前说的ruby安装目录下的bin目录下的sass.bat文件，自行找到即可。

Arguments

参数，

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

1、以上配置的意思是在scss文件存在的上级目录下的css文件夹生成编译好的css文件。

什么意思：

2、压缩

可选压缩，继续添加--style compressed即可，也即：

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

编译的就压缩了：

Output paths to refresh

相应的，这里就变成了：

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

效果：

添加css3前缀

需要node环境：

安装Autoprefixer，

npm install autoprefixer -g

安装postcss-cli，Autoprefixer其实是postcss的插件

npm install postcss-cli -g

然后配置External Tools

路径：File | Settings | Tools | External Tools

参数

名称：随意

描述：随意

Program

你安装的postcss.cmd的路径

由于我自定义了npm全局安装的文件的位置，所以我的是：

默认应该是C盘。可以自己找一下。

Arguments

$FileDir$/$FileName$ -u autoprefixer -r

参数意思：

$FileDir$/$FileName$将当前选择文件为输入文件

-u(--use) 使用autoprefixer插件

-r(--replace) 前缀写好了的内容，在当前文件替换。

Working directory

$ProjectFileDir$

工作区目录，如上就好。

使用

这只编译好了的css文件：

执行：

结果：