SCSS style not getting applied in Angular

Question

Following SCSS style not getting applied in Angular:

app.component.scss

body{
  background-color:red;
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import { ViewEncapsulation } from '@angular/core'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
}

Html:

<body>
  <nav>
  </nav>
</body>

Have you tried this? https://stackoverflow.com/a/50222036/6369514 — AlmaniaM, Oct 16 '19 at 23:07
no act you were able to perform, but only when changing src / style.scss when I change app.component.scss does not change the background color of red — Guilherme Luiz Stolfo, Oct 16 '19 at 23:26

score 2 · Accepted Answer · answered Oct 16 '19 at 23:28

2

You can't style the body tag from the app component. If you want to set the background color like you wish you need to do so in your styles.scss else file.

Also assuming want to set the background color to a tag in the app component, the tag has to have contents before you can see the background color or you can just set a height for the said tag and then the color will show

answered Oct 16 '19 at 23:28

Michael Ashefor

116
11

Do you know why that doesn't apply? Stopped nothing to do so now: styles.scss => @import "../node_modules/bootstrap/scss/bootstrap.scss"; body { background-color:blue; } I don't get the style I created a new project with scss and I put the js and css in angular.json and I created this style I don't get :S – Guilherme Luiz Stolfo Oct 17 '19 at 12:19

score 1 · Answer 2 · answered Oct 17 '19 at 02:31

Your app.component.html can't have a body tag because the angular lives in the app-root tag which is created inside the body tag of the index.html page

Actual rendered as

<body>
<app-root>
</app-root>
</body>

But what you are trying is and that is rendered as

<body>
<app-root>
<body>
<nav>
</nav>
</body>
</app-root>
</body>

And scss is applied as

body[app-root]{ background-color:red}

Which won't work.

So if you want to apply the background color you have to set the style in global scss file i.e

Style.scss that is present in the root folder of the application or search style.scss in command palette of the editor

SCSS style not getting applied in Angular

2 Answers2