时间戳

首页 > 解决方案 > Angular 6 not applying scss styles

css - Angular 6 not applying scss styles

问题描述

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?

标签： cssangularsass

解决方案

您的 SCSS 不适用于您的 HTML 文件product-detailpage.component.html。

原因是 Angular 使用shadow DOM作为组件。这意味着标签在您的组件<body>中<app-product-detailpage>无处可寻。

推荐阅读