zoukankan      html  css  js  c++  java
  • ionic开发之使用sass

    sass 是一个css的预编译器,常见的预编译器有less,sass,stylus等,目前sass似乎更受青睐一些,bootstrap的最新版本以及ionic 都是用sass来构建页面效果的。这篇文章讲解如何在ionic工程使用sass,以及浅层次的分析一下ionic是如何构建sass代码的。

    使用Sass

    首先要安装Python,和npm install -g gulp

    在工程文件夹中输入如下命令

    $ ionic setup sass

    这一步为我们的工程添加sass支持,之后我们可以在./scss/ionic.app.scss编写css代码。如果安装有问题,尝试调整node 版本,我使用4.1版本的node出错,切回0.12.7成功.

    sass代码构建过程

    ionic 使用gulp这个构建工具来预编译sass,我们输入setup sass命令的时候ionic会添加gulp-sass等gulp插件,然后在ionic.project文件中添加"gulpStartupTasks"项,在启动的时候增加gulp任务,sass和watch。

    这两个任务一个是用来编译sass文件,一个是用来监控sass文件,一有改动就重新编译,以适配liveload,下面是gulpfile.js的有关配置

    可以看到sass任务会将源文件为'./scss/ionic.app.scss'的代码用sass插件编译之后写入到'./www/css/'文件夹中(ionic.app.css),然后再将该文件用minifyCss插件进行最小化,重命名为ionic.app.min.css,然后写入到./www/css/中。
    最后,在www/index.html会加载该css:

    在我们输入ionic serve 命令的时候也会开启gulp任务,修改ionic.app.scss文件会实时编译,然后体现到浏览器中。

  • 相关阅读:
    springboot springcloud zuul 过滤器
    springboot springcloud eureka 熔断器
    javaweb servlet filter
    maven nexus 搭建私服(二)
    springboot springcloud zuul 网关入门
    springboot springcloud 配置中心
    springboot springcloud eureka 入门
    java rabbitmq
    java jvm调优
    maven nexus 搭建私服(一)
  • 原文地址:https://www.cnblogs.com/gyangfeng/p/6558596.html
Copyright © 2011-2022 走看看