App.component.scss not working

Ionic Framework ionic-v3
1

Hello,

I am in the process of porting a ionic 3 app to ionic 4.

I created a new project with the latest version of ionic:

Ionic:

   Ionic CLI                     : 5.2.6 (/Users/baw/.nvm/versions/node/v12.9.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.8.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.9.0 (/Users/baw/.nvm/versions/node/v12.9.0/bin/node)
   npm    : 6.10.2
   OS     : macOS Mojave

If I put the following into a page’s .scss it works correctly and sets the ion-content background color:

ion-content{
    --ion-background-color: var(--ion-color-dark);
}

If I move this from the page’s scss to the app.component.scss it no longer works.

I was hoping to set this globally for all of my pages instead of having to put it in each page’s .scss.

Any ideas as to what I am doing wrong?

Thanks

2

The app.component.scss is not a global style.
You have to put in the global.scss
Captura

3

Thank you for the information.

1 Like
4

You’re welcome, I’m here to help anyone with the knowledge and experience I have had in ionic for a few years now. :man_technologist: