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 ...
随机推荐
- android 绘图之Canvas,Paint类
Canvas,Paint 1.在android 绘图但中经常要用到Canvas和Paint类,Canvas好比是一张画布,上面已经有你想绘制图画的轮廓了,而Paint就好比是画笔,就要给Canvas进 ...
- js逻辑与,或,非
[转,未整理] 1.逻辑非(!) 如果一个操作数是一个对象,返回true; 如果一个操作数是一个空字符串,返回false; 如果一个操作数是一个非空字符串,返回false; 如果一个操作数是一个数值0 ...
- 微信分享朋友圈监听(PHP)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vimrc常用配置项
设置行号 set nu 设置自动缩进 set autoindent 设置tab占n个字符 set tabstop=n 设置以空格代替tab(因为有部分场合不允许使用tab) set expandtab ...
- 在C#中使用全局鼠标、键盘Hook
今天,有个同事问我,怎样在C#中使用全局钩子?以前写的全局钩子都是用unmanaged C或C++写个DLL来实现,可大家都知道,C#是基于.Net Framework的,是managed,怎么实现全 ...
- Linux文件时间属性
Linux文件时间属性 ...
- C++ Code_TabControl
主题 1. 选项卡控件基础 2. 显示图标的选项卡 3. 选项卡控件高级 4. 5. 属性 选项卡控件基础 1.插入1个对话框,新建1个类 CCDialog1,1 个对话框对应一个 ...
- 【JavaScript】重温Javascript继承机制
上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...
- 源码级分析Android系统启动流程
首先看一下Android系统的体系结构,相信大家都不陌生 1.首先Bootloader引导程序启动完Linux内核后,会加载各种驱动和数据结构,当有了驱动以后,开始启动Android系统,同时会加载用 ...
- iOS开发——UI篇Swift篇&UIToolbar
UIToolbar class UIToolBarUISearchBar: UIViewController,UISearchBarDelegate { var titleString:String! ...