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

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?


declare shared variables in variable.scss in theme folder

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.


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.

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 .