WebStorm 9 自动编译 SCSS 产出 CSS 和 source maps

1、  上一节我们学习了Windows下搭建Ruby开发环境，也为这一节的学习做了铺垫。因为本节需要在Ruby环境下安装SASS。详细请见：http://www.cnblogs.com/wind128/p/4226058.html。

2、  安装SASS，运行cmd命令，输入：

gem install sass

安装成功后打开目录C:\Ruby21-x64\bin，可见sass.bat、scss.bat文件。

3、  打开WebStorm，点File-->Settings,找到File Watchers,点右侧的“+”，选择SCSS，更改设置如下：

Program:C:\Ruby21-x64\bin\scss.bat

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

Working directory:$FileDir$

Output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

完成后点击右下的“OK”按钮。

4、回到WebStorm打开项目的页面，点右键新建一个scsstest的scss文件,会自动产出scsstest.css和scsstest.css.map。

产出的对应的map文件为：

{

"version": 3,

"mappings": "",

"sources": [],

"names": [],

"file": "scsstest.css"

}

 

5、写一段scss测试一下，会自动编译成css。