Watching Sass files from `ionic serve`, new in cli v1.1.9

#1

Since ionic-cli v1.1.9 we’ve introduced the ability to also watch and reload sass files using the ionic serve command.

To watch Sass files, you’ll first have to run ionic setup sass, which installs gulp and gulp-sass, along with changing which css files are linked in the head of the index.html file. (This means you’ll no longer be required to setup sass using ruby, but instead you’ll be using the faster C/C++ port of the Sass engine, libsass).

For more info please check out:

If you are already using Sass, or would like to start using it, please give this new command a shot and let us know how it goes.

To get the latest version of the ionic-cli please run npm update -g ionic. And while we’re at it, you can also now run ionic lib update to automatically update Ionic’s library files (including sass files) within www/lib/ionic.

Thanks!

#2

Hi Adam,
thank you for the update.
I’m currently working with Sass. I did an npm install to install gulp and gulp-sass, than changed the link to the css file in index.html to ionic.app.css and, in this file, I added the reference to my .scss:
@import “myproject”;

Now everything works well, but I need to launch “gulp watch” on another Terminal, before launching “ionic serve”, even if I have the CLI 1.1.9.

Should I run ionic setup sass? What does this command do exactly? I fear that it could break my current sass setup.

Thank you,
Matteo

#3

Works for me! Thanks. I still have to relaunch it though whenever gulp pukes–like when I have a syntax error in my .scss file.

#4

I receive the following error when I run ionic setup sass:

Error running npm install

Changes to ionic.app.scss are not reflected in my browser preview.

#5

I hade a similar issue, try running ‘bower update’.

#6

I have used ‘ionic setup sass’ and it works correctly when I run ‘gulp sass’ then run ‘ionic serve’. Is there a way I can get ionic to watch for a change in the sass files so I don’t have to run ‘gulp sass’ every time I make a change?

P.S. I think Ionic is ******* awesome!

Cheers,
Marty

#7

Did you find a solution to this?

#8

Could you please specify where you ran bower update?

I am executing bower update from within my app directory and it is saying bower: command not found

Thank you!

#9

That means its not installed yet.
npm install -g bower

#10

I had various errors. I needed to install gulp globally (sudo npm install -g gulp), delete my node_modules folder, then npm install and then ionic setup sass succeeded. I may have also installed bower globally, I can’t remember.

#12

Try to run “ionic setup sass” as administrator so in mac, as “sudo ionic setup sass” and in command prompt for those using windows, as administrator(right click command prompt, and click run as administrator).

If you get errors about installing ant:
Mac, you should install brew if you don’t already, and install ant. Here is a link with more details: http://stackoverflow.com/questions/3222804/how-can-i-install-apache-ant-on-mac-os-x

Windows: http://dita-ot.sourceforge.net/doc/ot-userguide13/xhtml/installing/windows_installingant.html

#13

One thing that caught me out was that changes need to be made in the root /scss directory. Initially I was puzzled as to why my changes in lib/ionic/scss weren’t being picked up by the gulp task.

Hope this saves someone else few minutes :smile:

#14

So my changes in scss stoped working after a while and then I noticed when doing ionic serve I was receiving the following error message:

    Starting 'sass'...
[11:46:32] [gulp-sass] no mixin named div-bg-img-with-opacity
Backtrace:
        scss/ionic.app.scss:190 on line 190 in D:/xxx/APP/scss/ionic.app.scss

So I corrected line 190 and everything worked fine again

#15

Hi! did you find a way for doing that?

#16

I have this problem too. I’m running project from the very beginning from this page http://ionicframework.com/getting-started/
And also following this page http://ionicframework.com/docs/cli/sass.html
After ionic serve html chage watched correctly but sass change is NOT watching!

I have to run gulp sass every time I change anything in .scss files.

How to make it watching on sass?

#17

This does not work anymore.

$ ionic setup sass
The setup task has been deprecated.

If I find out how to best do this, I will update here.

#19

Same thing here for my v1 project. Quite annoying!

#20

gulpStartupTasks in ionic.project doesn’t work any more (in CLI beta). Here, you can find workaround:
https://github.com/driftyco/ionic-cli/issues/999.

#21

Same for me, I can’t setup sass.

#22

add

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

to your gulpfile.js file and it should work now