Where to put global SCSS files in an Ionic 3 project and when it get converted into css file

Ionic Framework ionic-v3
1

Hi guys,

In my Ionic 3 project, I need to add some custom styling using SCSS. Where should put my custom SCSS files in the project structure? Should I need to add any configuration for converting these SCSS files to CSS?

Thanks.

2

declare shared variables in variable.scss in theme folder

3

Your global style come into app.scss
Then every single page of your app shoudl also have ist own scss inside the page’s Folder.

4 Likes
4

Hi in ionic 4 we dont have that app.scss file.
In ionic 3 i imported and used the custom scss files in app.scss.
I am not sure how to do it in ionic 4… Please help me out.

5

You can add the custom styles in styles.scss , but remind that if they are intermediate stylesheets, you must add !important to ensure:

ion-input {
   --background: var(--ion-color-light) !important;
}

Note: Use var(--ion-color-light) to apply Ionic native light (white) color from variables.scss .