Changing SASS variables does not work

1

Hi,

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

Here is a part of my /myproject/scss.ionic.app.scss:

...
$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/ionic.app.css
[00:18:18] Finished 'sass' after 330 ms
CSS changed:  www/css/ionic.app.min.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.

2

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

3

It was pretty stupid…Sorry about that.

I didn’t pay attention that SASS generates the new css in www/css/ionic.app.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/ionic.app.css" rel="stylesheet"> in index.html

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

1 Like
4

Yes, that is documented here

5

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