CODEWITHSUNDEEP
ionic-frameworkionic4
Glen Elkins
Glen Elkins

Reputation: 917

why does the main app scss file in ionic 4 not work?

I've been working on an ionic app, I've come to do some styling on it and I'm having issues with app.scss.

According to the ionic documents I should be able to use app.scss for app-wide styles such as the toolbar etc. but nothing happens when I try to style anything from this file, it's like it's not being included in the build?

The initial project was done by creating the app in CLI with the sidebar menu option as the template and all the scss files work fine in the individual components.

Any idea why the app.scss file isn't working? I've inspected elements I've tried to style and they are not being picked up at all.

An example:

ion-title {
  background: red;
}

this doesn't work, the toolbar background doesn't change, but it does through chrome inspector.

I have tried this in global.scss too and still nothing, funny thing is if I apply a display:none to all elements it works:

* {
  display: none;
}

it just doesn't seem to want to style individual elements like the "ion-title"

UPDATE:

There seems to be a bug in ionic 4, the styleUrls won't accept me adding ../app.scss , it throws an error, but I can include ../app.css so I'm just going to auto-compile the scss to css.

I can then include the app.css file in each component and it's working!

Upvotes: 3

Views: 5565

Answers (3)

Connor H
Connor H

Reputation: 346

In Ionic 4, global styles are saved by default in src/app/global.scss

If this is an Angular project that you are converting from an Ionic 3 template, you must add a reference to your global scss file in your angular.json file in under projects/app/architect/build/styles, like below

"styles": [
  {
    "input": "src/theme/variables.scss"
  },
  {
    "input": "src/global.scss"
  }
],

This is a change from Ionic 3 where it used to be in src/app/app.scss. If you created a project in Ionic 3 or earlier, you must move your styles into a new global.scss for them to be applied throughout the whole app

Upvotes: 3

Hassan Ali
Hassan Ali

Reputation: 1029

You must include the path of app.scss file in your app.component.ts like this

styleUrls: ['app.scss']

Then you will be able to use your scss file

Upvotes: 0

Glen Elkins
Glen Elkins

Reputation: 917

There seems to be a bug in ionic 4, the styleUrls won't accept me adding ../app.scss , it throws an error, but I can include ../app.css so I'm just going to auto-compile the scss to css.

I can then include the app.css file in each component and it's working!

Upvotes: 1

Related Questions