1)安装ruby

2)安装sass

3)配置webstorm

打开webstrom ->file->setting->Tools->file watcher

添加scss 

program:C:\Ruby22-x64\bin\scss.bat

arguments:默认的是在scss目录中生成css,如果要改变路径就需要进行配置(这里配置的是父级目录的skin/view/css)

--no-cache--update $fileName$:$FileParentDir$\skin\view\css\$FileNameWithoutExtension$.css

output paths to refresh :配置你的css目录（最终只有一个css）

可能会出现的异常：

1）安装sass失败

进入https://rubygems.org/gems/sass 下载sass,至本地

gem install 拖入你下载的sass

再一次进行配置

webstorm配置scss的小结的更多相关文章

  1. ruby安装及webStorm配置SCSS

    sass安装: 步骤:(window系统) 1.下载RubyInstaller(v2.4.3),运行安装,基本直接next安装,不过有个add to PATH的选项一定要勾选,这样就不用配置环境变量. ...

  2. webstorm 配置scss的问题

    第一种方法(ruby方法) 先安装ruby,在windows/system32目录下 1.先查询源是什么 gem sources 2.移除原有的源头 gem sources -r http://xxx ...

  3. webstorm配置scss自动编译路径

    webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录. 本文使用的webstorm为8.0版本 scss安装:http://www.w3cplus.com/sas ...

  4. webstorm配置scss环境

    1.下载 Ruby  (安装过程中记得勾选添加到环境变量,安装结束最后可能会弹出一个cmd弹框,可以忽略) 2. cmd安装sass gem install sass 3. cmd检查是否安装 sas ...

  5. Webstorm配置CSS/SCSS自动补全兼容前缀autoprefixer插件

    关于Autoprefixer Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及 ...

  6. webstorm配置编译sass的输出目录

    关于这个的问题,虽说不是很难,但还是踩了点小坑,下面就来介绍下如何使用webstorm配置编译sass的输出目录. 1.下载Ruby 2.使用Ruby安装sass 3.检测是否安装成功. 前面的几步很 ...

  7. WebStorm配置

    一.主题配色 主题设置方法:File -> Settings -> Appearance & Behavior -> Appearance ->Theme. webst ...

  8. mac下webstorm添加scss watcher

    一.前提条件: 1.安装ruby,如果我没记错的话,mac自带ruby,终端输入 ruby -v ,回车,如果显示ruby的版本号,则说明ruby环境已经安装好了.如果没有,自行安装ruby.例如我的 ...

  9. webstorm配置eslint【标记错误，修复错误】

    项目中经常用到eslint语法,结合个人经验,用webstorm配置eslint "文件"->"默认设置"->"语言&框架&quo ...

随机推荐

  1. 捕获enter键盘事件绑定到登录按钮

    /** *捕获enter键盘事件绑定到登录按钮 */ function keyLogin(event) { if (event.keyCode == 13) { document.getElement ...

  2. 使用wepy框架搭建微信小程序采坑记（一）

    1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文 ...

  3. Spring源码解析-IOC容器的实现

    1.IOC容器是什么? IOC(Inversion of Control)控制反转:本来是由应用程序管理的对象之间的依赖关系,现在交给了容器管理,这就叫控制反转,即交给了IOC容器,Spring的IO ...

  4. linux oracle11g 数据 导入到10g数据库

    说明: 原用户名和密码:test/test  目标用户名和密码:test01/test 11G 服务器: 1.创建dmp文件存储目录 # mkdir -p /tmp/backup # sqlplus ...

  5. Prism 4 文档 ---第6章 高级MVVM场景

        在上一章中描述了如何通过将UI,表现逻辑,业务逻辑分别放到三个单独的类中(View,View Model,Model),实现这些类之间的交互(通过数据绑定,命令以及数据验证接口)以及实现一个策 ...

  6. 剑指offer--44.两个链表的第一个公共结点

    @selfboot 牛逼的代码,长度相同,一遍出结果, 长度不同,短的点跑完,变成长的,当长的跑完变成短的链表的时候,较长的链表已经走过了多的结点. ------------------------- ...

  7. c# http操作类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...

  8. Linux:cd命令详解

    cd 用来变更用户所在目录的 绝对路径:路径的写法一定由根目录 "/" 写起.例如 /usr/local/mysql 这就是绝对路径.相对路径:路径的写法不是由根目录 " ...

  9. 微信小程序自定义tabbar的问题

    个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义 ...

  10. MDN搜索结果自动跳转中文地址

    MDN社区(即Mozilla开发者社区)具有很多高质量中英文文档.它是我开发时遇到概念模糊的地方经常访问的网站.因为默认搜索一些代码,优先显示的都是英文.但是恰恰这些显示的英文文档是有中文的.每次都是 ...