Ionic-cli: Sass changes not updating

[jgw96]

_From @FrancescoMussi on September 9, 2016 10:31_

Short description of the problem:

I swear to God and Buddha that before everything was working fine. I was changing the style of the app in the scss/ionic.app.scss and I could see in real time the outcome.

Now it doesn't work anymore. The only way I can see the actual change is:

• modify ionic.app.scss
• run: ionic setup sass
• run: ionic serve
• see the change in the app

If I want to make another change I have to repeat all the steps again....

What behavior are you expecting?

I expect to modify ionic.app.scss and see the change in real time. As it was before. And was great!

I expect to see the change being detected in the console, as before. Now the console keep silent like a fish.

Outcome of ionic setup sass:

Successful npm install
Updated /Applications/all_the_path/www/index.html <link href> references to sass compiled css

Ionic project ready to use Sass!
 * Customize the app using scss/ionic.app.scss
 * Run ionic serve to start a local dev server and watch/compile Sass to CSS

[12:16:13] Using gulpfile /all_the_path/gulpfile.js
[12:16:13] Starting 'sass'...
[12:16:15] Finished 'sass' after 1.37 s

My gulpfile.js: [excerpt]

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

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

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

My index.html:

 <!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">

Which Ionic Version? 1.x or 2.x

Ionic Framework Version: 1.1.1

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 1.1.1
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.3.1 Build version 7D1014

_Copied from original issue: driftyco/ionic#8029_

[syndesis]

Seeing this same issue, but if I run "gulp sass" manually it updates for me:
» gulp sass
[14:11:50] Using gulpfile ~/work/mobile/gulpfile.js
[14:11:50] Starting 'sass'...
[14:11:50] Finished 'sass' after 665 ms

ionic $ CSS changed: www/css/ionic.app.css
CSS changed: www/css/ionic.app.min.css

[kelyndm]

I have the same or a similar problem to yours @FrancescoMussi . I have found thanks to some help from @codecraftpro that if you run two CLI's in the same directory as your project, one with gulp watch running, and one with ionic serve running, sass works properly. This is a bit of a clunky solution to the problem, but at least it works. I am hoping to find out exactly whats going on with ionic serve to keep it from watching gulp.

[FrancescoMussi]

@syndesis Your method is certainly faster than my first attempt... I am using your method because I only lose a couple of seconds to exit from ionic serve, run gulp sass and rerun ionic serve.

@kelyndm I have tried your method but I am not sure why is not working properly with me. Thanks anyway for pointing out that.

[KevinGurden]

I also have the problem on Ionic CLI v2.0.0. I'm seeing it when issuing 'ionic run android --device'

[edneyreis999]

I'm exactly the same problem =/

[jeugregg]

one more...
I'm exactly the same problem =/
On mac os.
I have followed this install http://ionicframework.com/docs/cli/sass.html
I have executed this line : ionic setup sass
It update once after : ionic serve
But, never after.
Also, it does update when I execute : ionic setup sass or gulp sass

A temporary solution from here : https://forum.ionicframework.com/t/sass-not-compiling-on-watch-only-on-ionic-setup-sass/60685/7

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

I have installed sass from official website but: is it necessary ?

informations :

ionic info :
Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.3
Xcode version: Xcode 8.0 Build version 8A218a

sass --v :

Sass 3.4.22 (Selective Steve)

[p-syche]

I have the exact same problem on a Mac and using 'gulp watch' helps, but, as said before, it is a clunky solution...

[ABhimsaria]

Just Add in line no. 14:
gulp.task('default', ['sass', 'watch']);

then one terminal run: gulp and on the other run: ionic serve

[patrickhofer]

Any update?

[shanesmith]

Do you guys have the following lines in gulpfile.js? if not try adding them. =)

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

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

[lum3ll]

@shanesmith thx a lot... that finally works!

[fiznool]

Unfortunately adding the gulp task as mentioned above no longer works with v3 of the Ionic CLI, since gulp hooks aren't running any more. 😞

[bonatoc]

@fiznool — Did you try https://github.com/ionic-team/ionic-cli/issues/2901 ?