Siyah Siyah - 10 days ago 8
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
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.

Answer

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.