Sass not compiling on watch, only on ionic setup sass

ionic-v1
1

Even after i do ionic setup sass and it tells me to customize my app by changing ionic.app.scss, nothing works…
I had to manually insert the sass path to ionic.project/ionic.config.json for gulp to actually detect changes and now it detects it but doesn’t compile it. The only time the sass actually compiles is when i do ionic setup sass…

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/ionic.app.scss']
};

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('default', function(done) {
  gulp.watch('./scss/ionic.app.scss', ['sass']);
});
gulp.task('watch', function(done) {
  gulp.watch('./scss/ionic.app.scss', ['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();
});

{
  "name": "app2",
  "app_id": "",
  "gulpStartupTasks": [
    "sass",
    "watch",
    "default"
  ],
  "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*",
    "./scss/*.scss"
  ]
}
2

Same Probleme…

Need Help plz !

Thanks

3

same here, only if i do ionic setup sass it will update sass once and then finishes after about 600ms

4

Same issue. any fix?

5

Same problem. fix please!

6

Plz need fixed… I can’t work in this time. Nobody of ionic time can help ?..

7

I just had the same problem and found a simple solution:

Just open a two terminal windows, first run gulp watch in one window, it will continue running, so just head over to the second terminal window and begin working with ionic serve

Now every time I change my ionic.app.scss file it gets compiled and the app updates accordingly.

I’m using the exact same files that the thread-creator posted, in my case I had to manually add the line “./scss/*.scss” to “watchPatterns”.

2 Likes
8

Worked for me to but I don’t have to add anything to watchPatterns in my case.

Thanks!

9

I found the fix for this.

10

Thank you very much, it I was driving me nuts :raised_hand: