Angular 6不应用Scss样式 [英] Angular 6 not applying scss styles
问题描述
我有一个组件页面和相应的样式表，但是component.scss中的类不适用于该页面.没有错误，我仍然想知道为什么?
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?
这是我的product-detailpage.component.html
This is my product-detailpage.component.html
<div>
<h1>Product Detail Page</h1>
</div>
这是.ts文件
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() {
}
}
这是.scss文件
body{color:Red !important}
app-product-detailpage{
h1{color:red !important}
}
但是，我注意到的一件事是，如果我对global styles.css进行了更改，它就可以正常工作.只是为了检查一下我将车身颜色更改为绿色即可.
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.
我的角度应用程序配置为可与scss一起使用.可能是什么原因?有人可以建议吗?
My angular app is configured to work with scss. what could be the reason? can some one suggest?
推荐答案
您的SCSS无法用于您的HTML文件 product-detailpage.component.html .
Your SCSS won't work for your HTML file product-detailpage.component.html.
原因是Angular将阴影DOM 用于组件.这意味着在组件中找不到标签<body>和<app-product-detailpage>.
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.
这篇关于Angular 6不应用Scss样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
