在webstorm中配置sass环境

来源：互联网发布：sql 查询年龄最大的人编辑：程序博客网时间：2024/05/20 20:57

webstrom 是我前端开发最喜欢的一个编译工具，因为它集成了许多的插件，安装后就可以在wenstorm中配置就可以轻松进行开发了。

今天想说的是webStorm下如何实现sass自动编译。ok，let's begin

打开settings，可以看到Tools下面有个file watchers选项，点进去如下图

点击加号，选择SCSS或者SASS(根据自己写的格式，SCSS是最新版的SASS后缀)，我们这里选择是SCSS，进入配置界面

Programe是scss编译工具的目录地址，因为SASS是依赖ruby的，所以我们还需要去安装ruby，ruby在window下的安装文件下载可以在 http://rubyinstaller.org/downloads/ 网站找到，我这里下的193。其他环境的可以去官网下载：https://www.ruby-lang.org/

安装好ruby以后，打开cmd，输入gem install sass就可以安装SASS了，但是由于gem的默认原地址由于国内伟大的GFW原因可能连接不上导致无法安装，所以我们还需要替换一下。

依次输入：

gem sources –r http://rubygems.org/

gem sources –a http://ruby.taobao.org/

gem sources –l

如果我们看到最后显示的地址只有国内淘宝提供的镜像地址就OK了

然后再输入gem install sass就可以了，完成后输入sass –v 就会返回sass的版本号。

OK以后，在webstorm里面选择本机ruby目录下bin目录里面的scss.bat文件（如果需要编译SASS文件则选择sass.bat）

下面的输出参数，可以根据自己的需要填写，下面列出的是一些常用的参数

--style表示解析后的css是什么格式，如：--style compressed，有四种取值分别为：nested，expanded，compact，compressed.
--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。 webstorm是默认开启sourcemap的，所以可以不填写
--debug-info表示开启debug信息，升级到3.3.0之后因为sourcemap更高级，这个debug-info就不太用了。

ok ，现在我们撸一段代码看看

可以看到，我输入内容后，直接在源文件下生成了一个css文件和一个map文件。

可以参考关于sass这篇文章-----http://www.w3cplus.com/sassguide/

0 0