Ionic V1 Not compiling sass

jgw96 commented 7 years ago

From @iTakeHome on August 16, 2016 15:32

Note: If you are having problems formatting your issue please refer to this article on using markdown in Github:

https://guides.github.com/features/mastering-markdown/

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/ http://ionicworldwide.herokuapp.com/

Short description of the problem:

Ionic.app.scss doesn't compile to css when changed.

What behavior are you expecting?

Compile scss to css when changes are detected.

Steps to reproduce:

"ionic start myApp tabs"
"ionic setup sass"
"ionic serve -l"
It says customize your app by changing the ionic.app.scss
Not only does gulp not detect the change in ionic.app.scss but it doesn't even build when i serve.

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']);
});

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();
});

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.x or 2.x

Plunker that shows an example of your issue

For Ionic 1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview

For Ionic 2 issues - http://plnkr.co/edit/me3Uk0GKWVRhZWU0usad?p=preview

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

Copied from original issue: driftyco/ionic#7738

CarsonChen1129 commented 7 years ago

I have this problem too. The sass was not build during "Ionic serve" section (but the livereload on other stuffs works), it needs to compile to ionic.app.css manually in order to apply css changes. Downgraded to 1.7.14 solved this issue.

jgw96 commented 7 years ago

Hello @CarsonChen1129 and @iTakeHome ! Are you guys running into this issue with version 2.0 of the ionic cli? To get the version you can run ionic info. Thanks!

CarsonChen1129 commented 7 years ago

@jgw96 Thanks for the prompt reply. Yes, I forgot to attach my system info, here it is:

Your system information:

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0
ios-deploy version: Not installed
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

Issue: sass not compile automatically by gulp when using "Ionic serve", Ionic server shows:

Running live reload server: http://localhost:35729
Watching: www/**/*, !www/lib/**/*
√ Running dev server:  http://localhost:8100

Instead of:

Gulp startup tasks: 0=sass, 1=watch
Running live reload server: undefined
Watching: 0=www/**/*, 1=!www/lib/**/*
[15:23:10] Using gulpfile ~./gulpfile.js
[15:23:10] Starting 'sass'...
[15:23:10] Starting 'watch'...
[15:23:10] Finished 'watch' after 7.64 ms
[15:23:11] Finished 'sass' after 1.06 s
Running dev server:  http://localhost:8100

I did try:

sudo ionic setup sass (several times), result: :(
manually setup sass by following: http://ionicframework.com/docs/cli/sass.html#setup-sass-manually, result: :(
delete ionic.app.css, ionic.app.min.css and sudo ionic setup sass, result: :(
reinstall gulp/gulp-sass/gulp-minify-css, etc, ionic setup sass, result: :(
started a totally new project, run ionic setup sass, result: :(
downgrade ionic cli to 1.7.14, result: :)

kugaevsky commented 7 years ago

I've the same issue. It seems that gulpStartupTasks property from ionic.config.json is ignored by ionic-cli.

My system info:

Cordova CLI: 6.2.0
Gulp version:  Requiring external module coffee-script/register
Gulp local:   CLI version 3.9.0
Ionic Framework Version: 1.2.4
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0
ios-deploy version: 1.8.2
ios-sim version: 4.1.1
OS: Mac OS X El Capitan
Node Version: v6.3.1
Xcode version: Xcode 7.3.1 Build version 7D1014

On 1.7.14 everything works as expected.

AhsanAyaz commented 7 years ago

+1

Cordova CLI: 6.3.0 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 1.2.4 Ionic CLI Version: 2.0.0 Ionic App Lib Version: 2.0.0 ios-deploy version: Not installed ios-sim version: 5.0.8 OS: Mac OS X El Capitan Node Version: v6.1.0 Xcode version: Xcode 7.3.1 Build version 7D1014

Had to downgrade to 1.7.14 to get it to work again.

Waiting to be fixed in 2.x :)

falanso commented 7 years ago

Facing the same issue, I tried something in the blind. try in cli to write "gulp" and enter it gave

D:\Projects......>gulp [01:41:12] Using gulpfile D:\Projects......\gulpfile.js [01:41:12] Starting 'sass'... [01:41:13] Finished 'sass' after 919 ms [01:41:13] Starting 'default'... [01:41:13] Finished 'default' after 13 μs

and it seems it worked.. so at least it works.. best

AhsanAyaz commented 7 years ago

@falanso it works but you have to do it every time something changes. I.e. it wasn't compiling my html changes live because templatecache wasn't being updated with the task :)

roman-rr commented 7 years ago

@falanso Thanks it help me a lot.

blurry-code commented 7 years ago

Same problem for me.

My temporary solution is to run two terminals one for ionic serve and one for gulp. I also modified the default-task in gulpfile.js:

gulp.task('default', ['sass'], function(){
  gulp.watch('scss/**/*.scss',['sass']);
});

So in that way it behaves the same as it did in former CLI versions. Hope that get's fixed soon.

andrecbr commented 7 years ago

same problem here. waiting for "official" fix.

iron9light commented 7 years ago

me2. gulpStartupTasks not work! v2.0.0

dirkpostma commented 7 years ago

+100

Spend hour figuring out why my build scripts didn't work anymore :(

nye commented 7 years ago

Same problem here

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 1.3.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: v5.5.0
Xcode version: Xcode 7.3.1 Build version 7D1014

Radmation commented 7 years ago

Same issue here: The gulp works but it is annoying to do that each time. I think I may use PHPStorms file watcher in the mean time.

Cordova CLI: 6.3.1 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 1.3.1 Ionic CLI Version: 2.0.0 Ionic App Lib Version: 2.0.0 OS: Node Version: v4.5.0