title: Angular 6 not applying scss styles
body: <p>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? </p>
  
  <p>This is my product-detailpage.component.html</p>
  
  <pre><code>&lt;div&gt;
    &lt;h1&gt;Product Detail Page&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the .ts file</p>
  
  <pre><code>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 =&gt; console.log(params));
     }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>This is the .scss file </p>
  
  <pre><code>body{color:Red !important}
  app-product-detailpage{
          h1{color:red !important}
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>My angular app is configured to work with scss. what could be the reason? can some one suggest?</p>