CODEWITHSUNDEEP
sassionic-framework
David Dahan
David Dahan

Reputation: 11172

Why adding custom SASS variables does not work in Ionic?

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.

Upvotes: 3

Views: 8662

Answers (2)

Zhi
Zhi

Reputation: 29

To solve this in my project, I had to install gulp first. 

npm install -g gulp

Upvotes: 0

David Dahan
David Dahan

Reputation: 11172

It was pretty stupid...

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">

Upvotes: 5

Related Questions