Attempting to use sass watch

1

I have a new Ionic project running and have set it up to use sass. However, the sass documentation conflicts with that of the actual directory that you download.

Does anyone know the correct watch command to use after starting a new Ionic project, this is the command shown in the docs, but this does not tally with the actual directory:

sass --watch scss/app.scss:css/app.css

Sass is compiling correctly upon manually using gulp sass but I need to get watch setup.

Thanks!

1 Like
2

I actually wrote a more update version of working with sass for the learn site

http://learn.ionicframework.com/videos/sass/
http://learn.ionicframework.com/formulas/working-with-sass/

3

Thanks, but that doesn’t really resolve what I’m looking to achieve. Which sass file do I need to be watching? What would the command for this be based on the default directory?

4

Well no it does resolve your issue, as it explains where you should be writing you scss code.

./
|
|-scss
|–ionic.app.scss
|
|-www

This is not the correct way to use sass with ionic

sass --watch scss/app.scss:css/app.css

But the video does explain the correct way to set things up.

5

I’ve followed the same steps as outlined in the video. But the docs don’t align with the directory.

What is ‘not the correct way to use sass with ionic’?

Sass is working perfectly, but I can’t start heavily customising the project until the watch task is successfully working.

6

The docs on the site are outdate, the learn site has the most up to date.

It is based off this section

7

So ionic serve should automatically watch for changes?

8

Yep, it will watch for changes and update everything

9

Huh, well I’ll have to try that again then, because so far my attempts have not been successful.

10

What version of the ionic cli do you have?

$ ionic -v

It should be 1.2.3

1 Like
11

I’m on Version 1.2.3

I setup a new project, ran the following command… and it still doesn’t watch sass and reload the changes:

$ npm install -g ionic

$ ionic start myapp tabs

$ ionic setup sass

$ionic serve

Still no luck!

12

Odd, are you on a mac? Did you include sudo?

Are there any errors coming up in your console?

13

Yep, used sudo for npm install -g ionic on a Mac.

No errors on the console, here is what is outputted on running ionic serve

Running dev server: http://10.0.1.19:8100
Running live reload server: http://10.0.1.19:35729
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit

[21:54:52] Using gulpfile ~/myapp/gulpfile.js
[21:54:52] Starting ‘sass’…
[21:54:52] Starting ‘watch’…
[21:54:52] Finished ‘watch’ after 7.25 ms
CSS changed: www/css/ionic.app.css
[21:54:52] Finished ‘sass’ after 502 ms
CSS changed: www/css/ionic.app.min.css

14

Hmm, not sure what could be causing the issue. I just tested this out on my macbook pro and it worked fine for me.

What file are you editing?
Whats your version of ruby and sass on your mac?

15

I’m editing the variables_scss file for instance, no change takes effect on save.

Running Sass 3.4.3 (Selective Steve)

Running Ruby 2.1.1p76

16

Please bump tomorrow, I’ll be posting what I use :wink: To tired now and without bump I might forget.

17

Interested to hear the solution you’ve come up with regarding this… :smiley:

18

Could be that your are editing the _variables.scss file.

The watch isn’t watching that file, only the scss/ directory at the project root.
When working with sass with ionic, you should only work in that directory, since the ionic scss can change with new versions.

19

Okay, so now I see that it is watching the scss/ folder - meaning if I override a variable in this folder, the changes takes effect immediately.

But - that surely doesn’t mean I have to just use overrides? I want to heavily customise Ionic and therefore use @import to break up the code. Does sass watch not taken into account changes made in files that are referenced in an @import?

20

Hmm, I see what you mean.

It does and it doesn’t. So if you create and import a new file in that root scss directory, the changes do get passed. But you have to save the ionic.app.scss file specifically.

Soo a quick trick would be this

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

Originally this line:

gulp.src('./scss/*.scss')

was

gulp.src('./scss/ionic.app.scss')

By changing it, we can process all the files in the in the directory at once.
I’ll bring this up to the devs in the morning.

1 Like