Clever Geek Handbook

Why is adding custom SASS variables not working in Ionic?

I am setting up a new ionic project using the -s option to enable SASS.

Here is 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 running and the css is rebuilt:

[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 no matter what I entered in the scss file.

Can you explain why? Many thanks.

+3


source to share


2 answers


It was pretty silly ...

I didn't notice that SASS generates new css in www/css/ionic.app.css

However, the file included in the ionic index.html by default islib/ionic/css/ionic.css



The only thing to do is write <link href="css/ionic.app.css" rel="stylesheet">

in index.html

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

+5


source


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



npm install -g gulp
0


source






More articles:


All Articles