.scss not compiling .css automatically anymore after update

[1BJK903]

I am using Ionic and I have a Gulpfile.js that worked perfectly before. I updated npm, Angular, Ionic and cordova, which has broken my working environment.

Right now, I need to manually start ionic serve (or gulp watch) so that it recognizes that I make changes in my .scss file and then compiles it to .css

Before these updates, I could change my .scss file and it would automatically recognize the changes and compile it to .css instead of me triggering ionic serve or gulp watch manually beforehand.

This is what ionic info gives me:

WARN] Error with ./www/lib/ionic/version.json file: FILE_NOT_FOUND,
trying ./bower.json.

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.16.0
ionic (Ionic CLI) : 3.16.0

global packages:

cordova (Cordova CLI) : 7.0.1 
Gulp CLI              : CLI version 3.9.1 Local version 3.9.1

local packages:

Cordova Platforms : android 6.3.0 ios 4.4.0
Ionic Framework   : ionic1 master

System:

ios-deploy : 1.9.0 
ios-sim    : 5.0.8 
Node       : v6.8.1
npm        : 4.6.1 
OS         : macOS High Sierra
Xcode      : Xcode 9.1 Build version 9B55 

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

I am using xCode with cordova prepare ios to deploy it on the iPhone, but as you can understand, because the .css is not compiled automatically, the app does not recognize the css changes as it can not see them if I don't do it manually.

How can I fix this?

[imhoffd]

@1BJK903 What's your sass task look like?

Mine is this and it works for me:

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

[1BJK903]

@dwieeb, thanks for your response. This is how mine looks like:

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

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

gulp.task('sass', function(done) {
  gulp.src(paths.sass)
  	.pipe(concat('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']);
});

It worked before, before I updated the libraries / dependencies. Can you see what is wrong here?

I just want it to work as before. I was changing the .scss file and it directly changed the .css files. Right now, that part doesn't work and I have no clue why.

PS: changing it to your code doesn't work either. Just changes the .scss file, but the .css files are untouched.

[imhoffd]

@1BJK903 What libraries/dependencies did you update? I am using the latest gulp and gulp-sass.

[1BJK903]

Good question @dwieeb. I don't know for sure, but certainly things like npm, gulp, gulp-sass, node-sass, ionic, Angular and so on.

This is the list I am using:

    "dependencies": {
        "amdefine": "^1.0.1",
        "buffer-shims": "^1.0.0",
        "clone-buffer": "^1.0.0",
        "cloneable-readable": "^1.0.0",
        "cordova-android": "^6.3.0",
        "cordova-ios": "^4.4.0",
        "gulp": "^3.5.6",
        "gulp-concat": "^2.2.0",
        "gulp-minify-css": "^1.2.3",
        "gulp-rename": "^1.2.0",
        "gulp-sass": "^3.1.0",
        "ionic-angular": "^3.8.0",
        "ionic-app-lib": "^2.2.0",
        "ionic-native-transitions": "^1.0.0-rc10",
        "is-stream": "^1.1.0",
        "lru-cache": "^4.1.1",
        "natives": "^1.1.0",
        "ng-cordova": "^0.1.27-alpha",
        "npm-sass": "^2.2.1",
        "process-nextick-args": "^1.0.7",
        "pseudomap": "^1.0.2",
        "remove-trailing-separator": "^1.0.2",
        "sigmund": "^1.0.1",
        "swiper": "^3.4.2",
        "yallist": "^3.0.2"
    },
    "devDependencies": {
        "@ionic/app-scripts": "^3.0.1",
        "@ionic/cli-plugin-cordova": "1.4.0",
        "@ionic/cli-plugin-gulp": "1.0.1",
        "@ionic/cli-plugin-ionic1": "2.0.0",
        "bower": "^1.3.3",
        "connect-livereload": "^0.6.0",
        "core-util-is": "^1.0.2",
        "gulp": "^3.9.1",
        "gulp-sass": "^3.1.0",
        "gulp-util": "^3.0.7",
        "gulp-watch": "^4.3.11",
        "ionic": "3.16.0",
        "shelljs": "^0.5.3"
    },

[1BJK903]

@dwieeb: does this have to do something with: #1989

It seems so. Would it work again if I'd go back to Ionic CLI 2? I think I updated Ionic to CLI 3 and that seems to have caused the problem. Or do you think it's something else?

Otherwise I am suspecting this might be the problem:

WARN] Error with ./www/lib/ionic/version.json file: FILE_NOT_FOUND,
trying ./bower.json.

Or doesn't this one matter?

[imhoffd]

@1BJK903 No, that issue is very old and was fixed.

If you updated everything all at once, then it could be any number of things. I find it hard to believe this is the CLI's fault if gulp watch doesn't even detect scss changes.

I also see a lot of things that could be cleaned up in your package.json...

[1BJK903]

@dwieeb: I do think that's the problem, as it was working before I updated it all... I remember using Ionic CLI 2.

Beside that, gulp watch does detect scss changes, but only when I write gulp watch down manually in my terminal. However, when I don't use gulp watch, the .scss file is just being changed without changing / compling the .css files. So when I use gulp watch, it does compile the .css files, but I don't want to manually write down "gulp watch" everytime I start my terminal to work on a project.

Before, it was just doing it all automatically.

What else can I clean up, btw?

[imhoffd]

@1BJK903 I don't know what you're saying. How could it run for you automatically? What would run it? When developing Ionic Apps, ionic serve must be running to detect file changes and reload the dev server. Nothing will run the command automatically for you... ?

Also, why would .scss files change during gulp watch? They're source files. It's the .css files that change, because they are generated.

As for your package.json, you have @ionic/app-scripts installed even though your project is Ionic 1 (I think?).

All of these can be removed (the CLI warns you about this):

        "@ionic/cli-plugin-cordova": "1.4.0",
        "@ionic/cli-plugin-gulp": "1.0.1",
        "@ionic/cli-plugin-ionic1": "2.0.0",

This is ancient and can be removed:

        "ionic-app-lib": "^2.2.0",

You don't need the CLI installed locally, either.

What is npm-sass? gulp-sass (which you're using in your gulp file) uses node-sass under the hood.

You have the Ionic Angular 3 installed, but you're using Ionic 1, right?:

        "ionic-angular": "^3.8.0",

[1BJK903]

Hi there @dwieeb,

Thank you for your response. Well, it was working just "automatically", without me having to use gulp watch. It was either automatically or because I was using ionic build ios to push my code to xCode, which was fetching my .css file that I had changed by editing the .scss file. I never had to use gulp watch or ionic serve, ever. I don't know why you say that isn't possible, but it was for me.

All I was doing, was to edit the .scss file, commit via ionic build ios and done!

I only had to use ionic serve when I was using ionic livereload for editing it in-browser, but for xCode, I could just change my .scss code and notice it fetching the .css automatically without the need of ionic serve or gulp watch.

Thank you for the information regarding the dependencies. I am missing these things in documentations and so on. There are so many documents and Stackoverflow questions about the simplest questions, just because the documentation is lacking. So, thank you for your help, it gives me insight in how to deal with them.

PS: yes, I meant that .css has to change. I am editing .scss and it should change .css indeed. So what you are saying is that what I am asking for, shouldn't be possible at all? In that case, this can be closed, but I am wondering how it was working for me then. Weird shizzle!

[imhoffd]

I think I finally understand your issue.

ionic build (and similarly ionic cordova build ios) no longer invoke the sass gulp task, but it does happen for ionic serve. When I run `ionic build in my Ionic 1 project, I see this:

[WARN] Not performing Ionic build for project type: ionic1.

But actually, this is incorrect. It should build the sass!

Okay, thank you for being patient with me. I will fix this up.

[moscoso]

Hey i just wanted to chime in that I had the same problem. Thanks for bringing this to attention. Making changes to scss is very time consuming right now.

[moscoso]

I submitted this ticket about it with support. #6801:

Hello there,

I am working on an Ionic project and when I make any changes to scss files (even valid changes), the app essentially fails to reload giving the error ‘Cannot read property of Null’. I can refresh the app manually, but from then on every time I make changes to files in the project live reload fails with the same error.

This forces me to use ionic serve for each scss change I make which makes development slow.

---- End of Ticket

I should note that my project is Ionic3. I'm developing on windows 10.

[1BJK903]

@dwieeb: thank you very much!
@moscoso: great, now we wait until it's fixed

[imhoffd]

@1BJK903 @moscoso I just committed a fix for this issue. Please test by installing the alpha CLI: npm i -g ionic@canary.

EDIT:

3.18.0 has this fix: https://github.com/ionic-team/ionic-cli/blob/master/CHANGELOG.md#3180-2017-11-09

npm i -g ionic@latest

[1BJK903]

@dwieeb: thank you! Would it be a problem if I'd update it with the NPM version I have? I mean, I am using Ionic 1 and don't want to update it if it's going to break it all.

I am missing guidance from Ionic regarding the compatible versions we can use. Beside that, I have no clue what ionic@canary is, for example. Could you explain?

[imhoffd]

@1BJK903 My goal with the Ionic CLI is to support all versions of Ionic Framework. This means the latest version of the CLI should always be safe for your app, unless you see the major version has changed (which I don't plan on doing for as long as I'm able). If the major version changes, you'll need to take a look at the changelog to see if the breaking changes affect you.

ionic@canary is ionic (Ionic CLI) at the canary dist tag. It installs a different version than the default dist tag (latest). More info here: https://docs.npmjs.com/getting-started/using-tags

[moscoso]

I did some testing and it seems to NOT work for ionic@canary.

[moscoso]

I think this issue should be reopened

[ditproz]

I'm experiencing the same issue with a new ionic installation. I started a new project last week. The project only refreshes my sass changes when I restart the server ionic server.

Any ideas.

[1BJK903]

@ditproz: did you read the solution @dwieeb gave? He fixed it...

[jacquesdev]

Hi @dwieeb

This may be a related issue, but perhaps not, I just wanted to check. I am on ionic-cli@3.19.0.

So in the initial ionic cli v1 and v2 days, I had a gulpfile which basically had the following task in the gulp file, which would run when I ran ionic serve:

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

This taks would compile my sass as well as my js.

That all went well until ionic cli 3 was split out into a separate project, and I had to change this command to:

gulp.task('ionic:watch:before', ['default', 'watch'])

This all worked great, until it got merged back in, now it does watch and cause a livereload for any html and sass changes, but it ignores any of the js files I am watching as part of my 'default' task.

It looks no gulp tasks are being run at the moment, except for the sass one, and not sure how to change that - any help would be greatly appreciated!

[imhoffd]

@jacquesdev The Ionic CLI does not run the watch task in your gulp file. The watch logic is built into the CLI itself and it should work for HTML, CSS/SASS, and JS files. May I see the relevant task definitions from your gulpfile?

[jacquesdev]

Hi @dwieeb

Sure - thanks for assisting on this.

It looks something like this:

var paths = {
  coffee: [ './coffee/**/*.coffee' ],
  es6: [ './es6/**/*.js' ],
  sass: [ './scss/**/*.scss' ]
}

gulp.task('js', [ 'compile-js' ])
gulp.task('compile-js', (done) => {
  runSequence('coffee', 'es6', 'concat-js-source', done)
})
gulp.task('ionic:watch:before', ['default', 'watch'])
gulp.task('default', [ 'sass', 'compile-js' ])
gulp.task('watch', tasks.watch(paths))
gulp.task('sass', tasks.sass())
gulp.task('coffee', tasks.coffee(paths))
gulp.task('es6', tasks.es6())
gulp.task('concat-js-source', tasks.concatJavascriptSource())

with the actual watch task looking like this (it's in a separate module):

'use strict';

const gulp = require('gulp')
  , concat = require('gulp-concat')

module.exports = (paths) => {

  return () => {
    gulp.watch(paths.sass, [ 'sass' ])
    gulp.watch(paths.coffee, [ 'compile-js' ])
    gulp.watch(paths.es6, [ 'compile-js' ])
  }

}

Please shout if you need to see anything else of the gulpfile.

[imhoffd]

@jacquesdev So you're claiming the ionic:watch:before does not run? Could you run ionic serve --verbose?

[jacquesdev]

Sure

mac-mini:mobile jacques$ ionic serve -b --verbose
[DEBUG] CLI flags: { interactive: true, confirm: false }
[DEBUG] { cwd: '/Users/jacques/dev/mobile', local: true, binPath: 
        '/Users/jacques/.nvm/versions/node/v6.11.0/lib/node_modules/ionic/bin/ionic', libPath: 
        '/Users/jacques/dev/mobile/node_modules/ionic/dist/index.js' }
[DEBUG] Daemon found (pid: 25769)
Starting server (address: 0.0.0.0, port: 8100, dev server port: 53703, livereload port: 35729) - Ctrl+C to cancel
[DEBUG] Watch patterns: www/**/*, !www/lib/**/*, !www/js/app-coffee.js, !www/js/app-es6.js, !www/js/app-coffee.js.map, 
        !www/js/app-es6.js.map, !www/js/app.js.map, scss/**/*
[OK] Development server running!
     Local: http://localhost:8100
     External: http://192.168.1.130:8100
     DevApp: olio@8100 on mac-mini

[23:09:12] www/templates/global/feed/article-card.html changed
[DEBUG] GET /
...

In the above example, I ran the ionic serve, and then updated a html file to confirm that part of the watch is working. I then updated a js file (in both coffee and es6), and it does not print out anything else.

After [DEBUG] GET / the server just requests all the other urls using GET, until it's complete.

Just for reference, I have added the actual paths being passed into the watch in my previous comment so that you can see that as well if required.

[imhoffd]

@jacquesdev Okay, sounds weird, but do you have gulp listed in devDependencies of your package.json? If, not could you add it there? I'm not seeing something in the debug logs I expected.

[jacquesdev]

@dwieeb. You sire are a genius :)

I took over this project from a team a while back, and gulp had always been in dependencies and not in devDependencies. I moved it, and when I ran ionic serve

mac-mini:mobile jacques$ ionic serve -b
[WARN] Detected locally installed Ionic CLI, but it's too old--using global CLI.
> ionic integrations enable gulp
[OK] Added gulp integration!
Starting server (address: 0.0.0.0, port: 8100, dev server port: 53703, livereload port: 35729) - Ctrl+C to cancel
[OK] Development server running!
     Local: http://localhost:8100
     External: http://192.168.1.189:8100
     DevApp: olio@8100 on mac-mini

[10:19:09] www/js/app.js changed

Thank you sooooooooo much!!!!

[imhoffd]

@jacquesdev Awesome! Sorry about that. I will take a look at that weird issue.

[moscoso]

So @dwieeb this partially fixed the issue for me in that I no longer need to run ionic serve for it to compile the scss, but when it refreshes the browser it gives this error : Cannot read property 'indexOf' null (see the attached img for the stack trace)

Do you want me to open a new issue to tackle this error? This error always happens when any even valid changes are made to the scss.

[imhoffd]

@moscoso Alright. File a new issue, but be sure to update your CLI to the latest version first.