Changing SASS variables does not work



I setup a new ionic project using the -s option to enable SASS.

Here is a part of my /myproject/

$positive:                        #2a8000 !default;
$button-font-size:                30px !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

When saving this scss file, I can see in the shell that sass is launched and css is re-built:

[00:18:18] Starting 'sass'...
CSS changed:  www/css/
[00:18:18] Finished 'sass' after 330 ms
CSS changed:  www/css/

However, the new css file seems to be exactly the same, whatever I put into the scss file.

Can you explain why?
Thanks a lot.


Hmm, I just tested this and everything seems to work. Note that -s isn’t to setup sass. You need to run ionic setup sass


It was pretty stupid…Sorry about that.

I didn’t pay attention that SASS generates the new css in www/css/ However, the file included in the default ionic index.html is lib/ionic/css/ionic.css

The only thing to do is to write <link href="css/" rel="stylesheet"> in index.html

and remove <link href="lib/ionic/css/ionic.css" rel="stylesheet">


Yes, that is documented here


For me this work only if I delete the file css/ Sure I backup this before…