Siyah Siyah - 1 year ago 102
Sass (Sass) Question

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

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) {
.on('error', sass.logError)
keepSpecialComments: 0
.pipe(rename({ extname: '.min.css' }))
.on('end', done);

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

And this is my local environment:

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

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
at all.

Answer Source

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",
  "v2": false,
  "typescript": false,
  "watch": {
    "sass": [
    "html": [
    "livereload": [

Hope it will help someone else as well.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download