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. 在接口请求时报错Unrecognized field "zZF1&quot

    这个问题是json序列化问题,当参数中出现大写字母组成的字段时(例如:ZZF1),此时需在字段上加入注解:@JsonProperty(value = "ZZF1")

  2. Maven 中的dependencies与dependencyManagement的区别

    1.dependencyManagement 在Maven中dependencyManagement的作用其实相当于一个对所依赖jar包进行版本管理的管理器 在pom.xml文件中,jar的版本判断的 ...

  3. garylog学习篇

    官方文档:https://www.graylog.org/ 简介 Graylog 是一个简单易用.功能较全面的日志管理工具,相比 ELK 组合, 优点: 部署维护简单查询语法简单易懂(对比ES的语法… ...

  4. 使用 C++ 多态时需要注意的问题

    本文为大便一箩筐的原创内容,转载请注明出处,谢谢:http://www.cnblogs.com/dbylk/ 最近工作中遇到一些关于使用多态的细节问题,在此记录一下. 一.多态和模板匹配 模板是 C+ ...

  5. A网页高度随B内容而自然变化兼容各种浏览器

    今天是星期一,昨天又没有睡好,眼睛干干的,还有点痛疼,于是不想干啥.但是心里又不觉得过意不去,浪费时间呀,考虑再三把自己前面实现的一个东西发了上来.算是今天的功劳,没有过多的文字描述,纯粹是贴图片和代 ...

  6. ubuntu 14.04安装c++遇到的问题

    这是我在安装c++编译器时遇到的一些问题和解决办法,总结一下希望以后的人能少走弯路 安装g++编译器:sudo apt-get install build-essential build-essent ...

  7. 配置django上传文件目录的http访问

    1.假设你的html模版文件使用以下路径来访问上传文件内容: url="{{ MEDIA_URL }}{{ images.image }}" 2.设置settings文件: MED ...

  8. APUE学习笔记——7main()函数启动与退出

    程序的启动与退出过程 先上图,了解进程运行的机制.     内核首先调用exec,运行C启动进程,C启动进程会调用main()函数.     其他所有函数都是由main函数直接或间接调用的.     ...

  9. Linux:declare命令详解

    declare declare命令用于声明和显示已存在的shell变量.当不提供变量名参数时显示所有shell变量.declare命令若不带任何参数选项,则会显示所有shell变量及其值.declar ...

  10. Linux：vim环境设置

    vim环境设置 vim的环境设置在/etc/vimrc的这个文件中,不过不建议直接修改该配置文件.但是可以修改~/.vimrc文件,默认是不存在的,要手动创建并写入设置值. set hlsearch ...