Angular 6 not applying scss styles

css angular sass

24,907

Solution 1

Your SCSS won't work for your HTML file product-detailpage.component.html.

The reason is Angular uses shadow DOM for components. That means the tags <body> and <app-product-detailpage> are nowhere to be found in your component.

Solution 2

As per the documentation, The style specified in the component can only be applied to its template, which excludes the component.

This is the reason why your styles are not working on the component from component's style.scss but are working fine from global style sheet.

One way of doing it is to use :host pseudo selector as per this documentation which allows to add styles on the container in which component is placed.

The documentation says -

The :host selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template. The host element is in a parent component's template.

Solution 3

Because default css encapsulation in Angular is Emulated(ViewEncapsulation.Emulated) so Angular will render out like below:

input[_ngcontent-c0] {
    border-radius: 5px;
}

So if you want set style to the currently component, you can use Native option.

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

It will render like as:

input {
    border-radius: 5px;
}

But finally I suggest you use global scss file to define style of <web component>.

24,907

Author by

Arun-

Updated on June 26, 2020

Comments

Arun- almost 4 years

I have a component page and corresponding style sheet, however the classes in the component.scss dosen't apply to the page. There are no errors, I am still wondering why?

This is my product-detailpage.component.html

<div>
  <h1>Product Detail Page</h1>
</div>

This is the .ts file

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {ProductdetailService} from '../productdetail.service';
@Component({
  selector: 'app-product-detailpage',
  templateUrl: './product-detailpage.component.html',
  styleUrls: ['./product-detailpage.component.scss']
})
export class ProductDetailpageComponent implements OnInit {

  constructor(private route: ActivatedRoute, private productData: ProductdetailService) {
    this.route.params.subscribe(params => console.log(params));
   }

  ngOnInit() {
  }

}

This is the .scss file

body{color:Red !important}
app-product-detailpage{
        h1{color:red !important}
}

However one thing I noticed was if I make changes to the global styles.css it works fine. just to check I changed the body color to green and it works.

My angular app is configured to work with scss. what could be the reason? can some one suggest?

Vikas almost 6 years

Nope, it is incorrect By default Angular emulates style encapsulation, it uses shadow DOM when you set view encapsulation to native ViewEncapsulation.Native
Vikas almost 6 years

blog.thoughtram.io/angular/2015/06/29/…
Denis Evseev over 3 years

ViewEncapsulation.Native was deprecated use ViewEncapsulation.ShadowDom instead. angular.io/api/core/Component#encapsulation