4

I am using Ionic framework for my html5 mobile app.

I know I can add custom sass into the ionic.app.scss file under the scss folder and ionic serve or ionic build will compile my sass into css, but if I want to add additional sass files here, for instance ionic.home.scss how do I get these to compile? Do I need to modify the gulp file.

I am basically extending the default Ionic tabs app app. Here is the structure I was wanting, basically a sass file for each template

+-- _gulpfile.js
+-- _scss
|   +-- ionic.app.scss
|   +-- tab-home.scss
|   +-- tab-projects.scss
|   +-- tab-services.scss
+-- _templates
|   +-- tab-home.html
|   +-- tab-projects.html
|   +-- tab-services.html
+-- index.html

Here is the gulp file

var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('default', ['sass']);

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
});

gulp.task('install', ['git-check'], function() {
  return bower.commands.install()
    .on('log', function(data) {
      gutil.log('bower', gutil.colors.cyan(data.id), data.message);
    });
});

gulp.task('git-check', function(done) {
  if (!sh.which('git')) {
    console.log(
      '  ' + gutil.colors.red('Git is not installed.'),
      '\n  Git, the version control system, is required to download Ionic.',
      '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
    );
    process.exit(1);
  }
  done();
});

2 Answers 2

9

You can have just one ionic.app.scss and extend it with @import in this file.

@import "tab-home.scss", "tab-projects.scss", "tab-services.scss";
5
  • 1
    just for my own reference in a new project I struggled to get ionic.app.scss to compile to ionic.app.css, running ionic setup sass set it all up correctly in the index.html, here is a link to that problem, even though I have had no issue in the past changing the link manually in the index.html
    – svnm
    Nov 21, 2014 at 4:40
  • 1
    I tried that, and now gulp is not watching either of the files, I tried to revert it, but it still not watching, any thoughts ?
    – Ricky Levi
    Dec 4, 2014 at 12:10
  • don't forget that you need to restart the ionic server (i.e., re-run the gulp task) after adding *.scss files to your project so that gulp can know to watch them Feb 1, 2015 at 5:52
  • I am having a similar issue - Altough this solution will work - it still actually doesnt answer the question on how to fix the gulp task.
    – Christer
    Mar 13, 2015 at 15:18
  • The task is not broken, why do you want to fix it? Mar 14, 2015 at 15:34
0

Change the gulp.src() in the sass or scss task in your gulp file to something like gulp.src("_scss/**/*.scss") the double * means that any subdirectories are included. Also if you dont want to output another css file you need to create partials(just add a _ to the beginning of your sass file names.

4
  • I tried ("_scss/**/*.scss") but it did not work, it was previously ('./scss/ionic.app.scss')
    – svnm
    Nov 19, 2014 at 2:33
  • Send me your gulp file or just your scss task and ill try to fix it. You probably need to change your gulp.dest() to something like "dist/css/" though
    – epelc
    Nov 19, 2014 at 16:19
  • I added the gulp file to the description above, Thanks
    – svnm
    Nov 19, 2014 at 20:29
  • gulp.src('./scss/**/*.scss')
    – rynangeles
    Mar 16, 2015 at 13:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.