百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> Webstorm中设置Ionic工程的sass watcher的例子
分享文章到:

Webstorm中设置Ionic工程的sass watcher的例子

发布时间:01/15 来源: 浏览: 关键词:
WebStorm 是一款由jetbrains公司推出的商业的 ja vasc ript 开发工具,下面我们来看一篇Webstorm中设置Ionic工程的sass watcher的例子吧。

这里以Websorm 11为例,其他版本或JetBrains的其他IDE都是类似的。首先在工程下面创建名为config.rb的compass配置文件,针对Ionic工程项目来说,配置文件的内容如下:

 project_path = "www"
 sass_dir = "."
 sass_path=  File.expand_path("scss")
 css_dir = "www/css"
 javascript_dir = "www/js"
 images_dir = 'www/img'

这里需要特别注意的是,不能直接将sass_path设置成scss,而是需要同时设置sass_dir和sass_path,并且sass_path设置成File.expand_path(“scss”)。

接下来在File – Settings菜单中打开Settings对话框,首先打开Languages & Frameworks下面的Compass,选择Enable Compass support,将当前项目启用为支持compass,需要确定compass和config指向的文件都是正确的。

20160317141648

然后再依次选择 Tools 下面的 File Watchers,点击右上角的加号并选择Compass SCSS

20160317141931

设置如下:

20160317142219

Arguments的内容是compile -s compressed $ProjectFileDir$ $UnixSeparators($FilePath$)$,其中-s compressed 是compass内置的用于对输出的css进行压缩的参数,也可以在config.rb中进行设置。

保存所有设置之后在编辑scss文件的时候就会自动编译输出成css文件了。
打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有2人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板