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
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?
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.
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.
The docs on the site are outdate, the learn site has the most up to date.
It is based off this section
So ionic serve
should automatically watch for changes?
Yep, it will watch for changes and update everything
Huh, well I’ll have to try that again then, because so far my attempts have not been successful.
What version of the ionic cli do you have?
$ ionic -v
It should be 1.2.3
1 Like
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!
Odd, are you on a mac? Did you include sudo?
Are there any errors coming up in your console?
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
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?
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
Please bump tomorrow, I’ll be posting what I use
To tired now and without bump I might forget.
Interested to hear the solution you’ve come up with regarding this… 
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.
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?
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