Ionic 2.0 bug: SASS not compiling (watching) anymore when using serve after Ionic update

I have recently updated ionic and it’s libs, but that has changed many things for me.

Right now, I can make some changes in the HTML and my livereload just shows them. When I do this in a certain SCSS file, nothing happens at all. So the ionic serve --lab command is just useless for me.

Can someone help me out? This is my gulpfile.js

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())
    .on('error', sass.logError)
    .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']);
});

And this is my local environment:

Cordova CLI: You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.3.1

Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 1.3.1-nightly-4219
Ionic CLI Version: 2.1.0-beta.3
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v6.6.0
Xcode version: Xcode 8.0 Build version 8A218a 

Any idea what goes wrong or what I should do? I already tried ionic setup sass, but that just works for one time. I don’t want to that everytime I change the code. It looks like it’s not watching my SCSS file anymore, but I don’t know why, because I haven’t changed my gulpfile.js at all.

Okay, I’ve found the solution, but it’s actually very sad that the transition between ionic 1.x and ionic 2.x is just so badly documentated and not working flawlessly.

Anyway, what I did is:

Add this to my gulpfile.js

gulp.task('serve:before', ['default','watch']);

And also change my ionic.config.js file to:

{
  "name": "HereComesTheNameOfYourApp",
  "app_id": "YOURIDNUMBERHERE",
  "v2": false,
  "typescript": false,
  "watch": {
    "sass": [
      "scss/**/*.scss"
    ],
    "html": [
      "www/**/*.html"
    ],
    "livereload": [
      "www/**/*.html",
      "www/**/*.js",
      "www/**/*.css"
    ]
  }
}

Hope it will help someone else as well.

1 Like