安装sass并在webstorm中为scss添加watcher

2019-08-01 17:05:24

参考链接 安装sass并在webstorm中为scss添加watcher

1. 安装Ruby 最新为 2.1.5版本,不放心的话安装 Ruby 1.9.3-p551


   安装过程中注意勾选上第二项!即将Ruby加入到可执行的环境变量中去。



    安装结束后在命令行中运行 ruby -v 能看到对应的版本则说明安装正确。




2.通过Ruby安装Sass

    启动Ruby中的“Start Command Prompt with Ruby”

    在命令行中输入:

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

gem source -a http://ruby.taobao.org

gem install sass

因为GFW的缘故,特将淘宝的Ruby镜像添加进来,安装Sass。

安装结束后在命令行中运行 sass -v 能看到对应的版本则说明安装正确。



3.启动WebStorm,打开已有项目,创建一个scss文件。

    这是在右上角会显示Add Watcher按钮,点击它,在弹出的对话框中,将Program的路径设为Ruby中scss.bat的路径。



 


    也可以修改css的输出路径等等。


    主要步骤已经完成,现在在我们修改scss文件的时候,webstorm会为我们自动生成对应的css文件,别忘记在html中引入这个css文件。


    测试修改ionic的主题颜色,在之前创建的scss文件中添加以下内容并运行。

$positive: #00FF00;

 

@import "../lib/ionic/scss/ionic";


    就会发现之前使用蓝色positive的内容全部变成了绿色。




  • 2017-03-18 20:17:09

    Linux上vi(vim)编辑器使用教程

    vi(vim)是上Linux非常常用的编辑器,很多Linux发行版都默认安装了vi(vim)。vi(vim)命令繁多但是如果使用灵活之后将会大大提高效率。vi是“visual interface”的缩写,vim是vi IMproved(增强版的vi)。在一般的系统管理维护中vi就够用,如果想使用代码加亮的话可以使用vim。下面vps侦探整理一下vi的使用教程:包含vi的基本介绍、使用模式、文件的打开关闭保存、插入文本或新建行、移动光标、删除、恢复字符或行、搜索等等,算是一篇比较适合新手学习vi的教程。

  • 2017-03-20 17:31:55

    Nodejs express 获取url参数,post参数的三种方式

    127.0.0.1:3000/index,这种情况下,我们为了得到index,我们可以通过使用req.params得到,通过这种方法我们就可以很好的处理Node中的路由处理问题,同时利用这点可以非常方便的实现MVC模

  • 2017-03-20 17:33:55

    forever守护nodejs进程

    这样可以正常启动应用,但是如果断开客户端连接,应用也就随之停止了。也就是说这样的启动方式没有给应用一个守护线程。

  • 2017-03-22 14:00:51

    Andriod Studio结合Visual Studio Emulator for Android调试Android App

    说到开发就绕不开调试程序,调试Android App我们有2种选择,真机调试和模拟器调试:真机调试相对简单,就不做介绍了,还有一方面原因是由于安卓手机一旦插到电脑上,开始ADB调试后,各种的流氓软件净是往手机上装垃圾应用,妈蛋的;随后就试了几次Android Studio的模拟器之后,无限感慨,真尼玛的卡,卡,卡,,,是可忍孰不可忍.....

  • 2017-03-22 16:26:36

    最全面的Android Webview详解

    现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图

  • 2017-03-23 22:29:52

    Android开发中Handler的经典总结

    当应用程序启动时,Android首先会开启一个主线程(也就是UI线程),主线程为管理界面中的UI控件,进行事件分发。