Ionic.app.scss file not updating

I have a build utilizing ionic that seems to update everything other than my changes to the ionic.app.scss file. Any changes to my custom CSS file and the HTML appear, however when I make a change to an element in the ionic.app.scss file based on the tutorial video, it does not update the build showing in the browser.

I am simply trying to change the default color for the “assertive” variable, as shown in the provided screenshot. Any suggestions as to why my changes are not showing would be greatly appreciated.

image

You need to use sass to build the www/css/ionic.app[.min].css files from the .scss files.

Probably the easiest option is to execute ionic serve or gulp watch from the project’s directory, both will start a watch background task which updates the css files anytime you modify the scss files. ionic serve also starts a web server with live reload support, so you can see your scss changes almost realtime (in your web browser). You can also use gulp sass to execute sass just once and quit.

Ionic CLI has a good documentation, you can also use ionic help [command] to get hints and all options for respective CLI commands.

Before first use, however, use ionic setup sass to initialize your project for sass tools and make sure that your index.html is changed so that it uses compiled css output (css/ionic.app.css). Here is the complete guide.

1 Like

Thank you dreamy, this worked perfectly! You saved me. :smile:

Hi.

I did all this doc said. http://ionicframework.com/docs/cli/sass.html
But It still don’t watching my sass. I have to manually run gulp sass command