ionic使用sass
sass 是一个css的预编译器,常见的预编译器有less,sass,stylus等,目前sass似乎更受青睐一些,bootstrap的最新版本以及ionic 都是用sass来构建页面效果的。这篇文章讲解如何在ionic工程使用sass。
1.首先需要在ionic项目中执行下面的命令:
ionic start CustomSass blank && cd CustomSass
ionic setup sass
注意:在执行这个命令的时候有可能会出错,然后就会提醒‘npm install -g gulp’,这时候按照提示执行这个命令,然后执行ionic setup sass就不会出错了。
2.执行完ionic setup sass之后,查看一下index.html,这时候它自动删除了ionic.css,以及style.css替换成ionic.app.css了
3.在ionic.project文件中添加:
"gulpStartupTasks": [
"sass",
"watch"
],
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
]
4.执行ionic serve,在ionic.app.scss中写你的sass;
5.也可以在ionic > scss文件夹下建立一个新的scss文件:_uouoho.scss,然后在ionic.scss文件下@import该文件:‘uouoho',接着在_uouoho.scss中写入sass就可以了。
ionic使用sass的更多相关文章
- ionic 启用sass
转入ionic项目目录,命令行下执行:ionic setup sass 提示编译器未装: You have specified Ionic CI to set up sass.However, you ...
- sass sublime text 2 gulp ionic
sass 安装1.全局安装 sass 我的Mac 所以不用再安装Ruby ,直接在终端输入 gem install sass 然后在终端中输入 sass -v 出现 Sass 3.4.8 (selec ...
- ionic中应用sass
在学习ionic过程中看到sass,总结了一下基本用法和问题解决办法1.首先需要一个ionic项目,并执行下面的命令ionic start CustomSass blank && cd ...
- ionic 项目中 使用 sass
注: 1.先安装node-sass -->> npm install --save node-sass --registry=https://registry.npm.taobao.or ...
- VS2015+cordova+ionic安装配置
VS2015已经出了正式版,想用来试一下cordova方面的开发.最近在看ionic这个框架,于是想能在VS2015里编辑js就好了. 下面说一下蛋疼的安装配置过程. 一.安装VS2015及Andro ...
- ionic常用命令记录
npm install -g ionic //安装ionic ionic lib update //更新www/lib/ionic 目录的文件,如有项目中有bower,此命令会运行bower upda ...
- hybird app(混合式app开发)cordova ionic 创建相应平台的app
hybird app(混合式app开发) 之ionic 框架平台 guide cordova 创建相应平台的app 1. npm install -g cordova //全局安装cordova-cl ...
- ionic添加scss
Setup Sass Automatically 在进行以下操作之前要确保node比较新,以便正确安装node-sass 或 改用cnpm install node-sass安装(淘宝源) $ ion ...
- Ionic常见问题
1.sh: 1: glxinfo: not found sudo apt-get update && sudo apt-get install mesa-utils 2.ionic s ...
随机推荐
- ELF学习--可执行文件
承接上一篇.我们来看看可执行文件和重定位文件的不同点. readelf -h test 相比较重定位文件,可执行文件的ELF header中入口地址是0x8048320.而且除了section hea ...
- 关于html和body高度 登录页面登录框永远保持在页面垂直水平居中位置
HTML CSS 解说,水平居中就不用多说了,给div.login_wrap设置个宽度,然后margin:0 auto;就可以做到.但是这里这样做,这里使用了两层div 外层使用margin:0 au ...
- C#以及Oracle中的上取整、下取整方法
1.C#中: 上取整——Math.Ceiling(Double),即返回大于或等于指定双精度浮点数的最大整数(也可称为取天板值): eg: Math.Ceiling(1.01)=2; Ma ...
- jquery提示信息 tips
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- pic/at89c2051 programmer
http://dangerousprototypes.com/forum/viewtopic.php?t=170 It looks like the PICKIT2 uses a small boos ...
- Qtwebkit flashplayer插件问题
复制npswf32.dll 到 C:\WINDOWS\system32\Macromed\Flash\ 代码加入: //! [1] QNetworkProxyFactory::setUseSyst ...
- 微价值:专訪《甜心爱消除》个人开发人员Lee,日入千元!
[导语]我们希望能够对一些个人开发人员进行专訪,这样大家更能显得接地气,看看人家做什么,怎么坚持.<甜心爱消除>作者Lee是三群的兄弟,也关注微价值.微价值的文章还是能够的,得到一些业内大 ...
- C++ 方法隐藏
1.过载:一个类中,方法名相同,形参表不同的方法. 2.重写:子类与父类的virtual方法,方法名,形参表相同. 3.考虑下面的情况,子类与父类方法名相同. 父类是virtual方法 ...
- Codeforces Round #180 (Div. 2) B. Sail 贪心
B. Sail 题目连接: http://www.codeforces.com/contest/298/problem/B Description The polar bears are going ...
- oracle where 后面的条件中|| 是什么意思
oracle where 后面的条件中|| 是连接符号,Oracle中另一个concat函数能够连接两个字符串 concat(a,b) Oracle中nvl函数的使用方法和作用是什么? 假设你某个字段 ...