ionic2:can't set <ion-content> background color in variables.scss

Question

in html:

<ion-content class="bg-style">

in variables.scss:

.bg-style {
    background-color: #f5f0eb;
}

the above codes do not work,but it can work in other tags like <a> <div> and so on,and when I put the style file(.scss,such as test.scss) in the same path as the html file,it can work well also.I do not know if my question is clear,thank you for help.

Solution 1

use app.scss file instead of variables.scss.

app.scss

  .bg-style {
        background: #f5f0eb;
    }

Solution 2

I would recommend you to override the ionic variables

$background-color: #f5f0eb !default;
$background-ios-color: #f5f0eb !default;
$background-md-color: #f5f0eb !default;

Check this url for more details - link

Solution 3

in the app.scss file add a style

.fixed-content{
    background-color: #f5f0eb;
}

it will apply to all pages, and you don't have to add a class to every ion-content

Comments

[David]

you can see the answer I posted below, but thank you for your help.

[Sampath]

It is not the recommended way of doing this. If you need to do any application level changes then use app.scss.If you need to do provider level changes and theme (such as ios/android/windows) then use variables.scss.

[Jose Ricardo Citerio Alcala]

I can't find this file app.scss in the theme folder, just the variables.scss file., Where is it?

[Sampath]

It is in the app folder. @JoseRicardoCiterioAlcala