Angular 6 not applying scss styles

Question

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?

Answer 1

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>.