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就可以了。

时间: 2024-08-13 03:48:14

ionic使用sass的相关文章

Ionic、SASS、MVVM、LESS简介

Ionic_百度百科 ionic[1] 是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架.绑定了AngularJS和Sass.这个框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程序. ionic的开发添加android和ios环境. ionic提供很多css组件[2] 和javascript UI库. ionic可以支持定制android和ios的插件,也支持服务端REST的敏捷开发. ionic 特点 编

sass sublime text 2 gulp ionic

sass 安装1.全局安装 sass 我的Mac 所以不用再安装Ruby ,直接在终端输入 1 gem install sass 然后在终端中输入 sass -v 出现 Sass 3.4.8 (selective steve) ,表示安装成功.sass的编译1. 使用 sublime text 2 1.1 preferences-->PackageControl---> 输入 install package ---->输入 SassBuilder 安装插件完成1.2 新建项目 ---&g

ionic添加scss

Setup Sass Automatically 在进行以下操作之前要确保node比较新,以便正确安装node-sass 或 改用cnpm install node-sass安装(淘宝源) $ ionic setup sass Setup Sass Manually 在执行npm install之前确保执行零npm install -g 先安装全局,再安装本地 1. Run npm install from the working directory of an Ionic project. T

Ionic常见问题

1.sh: 1: glxinfo: not found sudo apt-get update && sudo apt-get install mesa-utils 2.ionic setup sass 之前需要安装gulp 全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能(安装完以下前两步就可以正常执行sass) npm install -g gulp 在项目中npm install node-sass 安装卡在 node scripts/insta

VS2015+cordova+ionic安装配置

VS2015已经出了正式版,想用来试一下cordova方面的开发.最近在看ionic这个框架,于是想能在VS2015里编辑js就好了. 下面说一下蛋疼的安装配置过程. 一.安装VS2015及Android SDK 首先Android的SDK最好提前下好,我是从另一个电脑上把已经下好的sdk复制到D盘Android目录下,这样安装VS2015的时候就不用选择SDK下载了,速度会快点. 安装VS2015的时候最好网络FQ一下,不然有些组件有可能会下载失败.安装的组件我没选Xamarin,这玩意太贵用

Mac配置Android 环境

1. app项目下 ionic setup sass “第一次clone一个项目要编译一次sass” 2. git checkout . “返回到修改之前” 3. git status “查看状态” 4. git diff "如果个别不清楚的文件有修改,可以查看修改内容" 5. git checkout -A “切换到分支A” 6. rm -rf app "Develop 项目的父极目录下 删除Develop下的app" 7. ls -all “显示列表的所有信息”

AngularJS之移动开发

一.开发框架 Ionic 框架:基于HTML5,CSS3  官网:http://www.ionic.wang; cordova :打包工具,打包跨平台的APP程序,提供跨平台的API库 plugins.cordova.io ngcordova:AngularJS中的操作cordova库 网站:ngcordova.com/docs/plugins/ 二.平台安装 1.安装ionic  npm install -g cordova ionic 三.创建框架 ionic start myapp tab

轻松学习Ionic (三) 安装sass并在webstorm中为scss添加watcher

1. 安装Ruby 最新为 2.1.5版本,不放心的话安装 Ruby 1.9.3-p551 安装过程中注意勾选上第二项!即将Ruby加入到可执行的环境变量中去. 安装结束后在命令行中运行 ruby -v 能看到对应的版本则说明安装正确. 2.通过Ruby安装Sass 启动Ruby中的"Start Command Prompt with Ruby" 在命令行中输入: gem sources --remove https://rubygems.org/ gem source -a http

ionic开发之优化目录结构

当我们来个ionic start circleApp tabs的时候,会自动生成目录结构,基本如下: 显然这不利于项目的管理,当你的项目越来越复杂的时候,这是不够的.我们必须要按照模块进行文件夹的方式去管理 以下为优化后的目录结构 在模板处,我们将其按照模块文件夹的方式去分开管理,每个模块带着自己的控制器走.采用就近原则的管理方式. 当然只要你百度,还有更具备模块化的管理方式,当项目大到一定程度的时候,这种管理方式显然也是不够的,这里不做讨论. 接下来讲讲如何定制化自己的ionic主题样式. i