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. 5G信令（就是用户身份信息）风暴——就是客户端通过公钥加密的消息（携带手机IMSI号）发给服务端，服务器需用私钥解密，这个解密比较消耗资源，如果短时间大量请求到来就会触发信令风暴

    信令:手机开机后,先从USIM中读取之前运营商分配的临时身份信息GUTI/TMSI,发送携带该身份信息的信令给基站,请求接入运营商网络. 如果每个设备的每条消息都需要单独认证,则网络侧安全信令的验证需 ...

  2. vue的slot的使用问题

    slot的使用问题 根据官方文档来说,有三种使用方式 https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92 ...

  3. Django开发BUG "Model class WH_auth.models.User doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS."

    当进行数据库迁移的时候发生问题,报错如下:RuntimeError: Model class WH_auth.models.User doesn't declare an explicit app_l ...

  4. Java 进阶7 并发优化 1 并行程序的设计模式

       本章重点介绍的是基于 Java并行程序开发以及优化的方法,对于多核的 CPU,传统的串行程序已经很好的发回了 CPU性能,此时如果想进一步提高程序的性能,就应该使用多线程并行的方式挖掘 CPU的 ...

  5. CF445

    题解: xjb乱判断一下就可以了 代码: #include<bits/stdc++.h> using namespace std; typedef long long ll; int n, ...

  6. 在微信里面打开链接，显示501 Not Implemented，但是同样的链接在其他浏览器是可以打开的。

    在微信里面打开链接,显示501 Not Implemented,但是同样的链接在其他浏览器是可以打开的. 显示: 还原:该链接在2017年之前微信还是可以访问的. 访问的地址格式是:http://xx ...

  7. Windows下安装tomcat

    一.Tomcat下载与安装: 1.直接到官网下载Tomcat安装程序包:http://tomcat.apache.org/ 2.下载下来后是个压缩包,如:apache-tomcat-8.0.26,解压 ...

  8. Bireme：一个 Greenplum数据仓库的增量同步工具

    https://hashdatainc.github.io/bireme/ Bireme 是一个 Greenplum / HashData 数据仓库的增量同步工具.目前支持 MySQL.Postgre ...

  9. SQL Server 2008 R2 使用 PIVOT 错误

    SQL Server 2008 R2 使用 PIVOT 错误! 'PIVOT' 附近有语法错误.您可能需要将当前数据库的兼容级别设置为更高的值,以启用此功能. 有关 ALTER DATABASE 的 ...

  10. React-Native进阶_5.导航 Naviagtion

    有这样一个组件 他可以控制页面跳转 返回,在移动端叫做导航控制器, 在RN中叫路由 我们使用的  react-native-navigation 是一个开源组件库介绍:A complete nativ ...