Angular 6 不应用 scss 样式

Question

我有一个组件页面和相应的样式表，但是 component.scss 中的类不适用于该页面。没有错误，我仍然想知道为什么？

这是我的 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}
}

但是我注意到的一件事是，如果我对全局 styles.css 进行更改，它就可以正常工作。只是为了检查我将身体颜色更改为绿色并且它可以工作。

我的 Angular 应用程序配置为使用 scss。可能是什么原因？有人可以建议吗？

原文由 Arun- 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

因为 Angular 中的默认 css 封装是 Emulated (ViewEncapsulation.Emulated ）所以Angular将呈现如下：

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

因此，如果要将样式设置为当前的 component ，可以使用 Native 选项。

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

它将呈现为：

 input {
    border-radius: 5px;
}

---

但最后我建议你使用 全局 scss 文件来定义 <web component> 的样式。

原文由 Dinh Duong 发布，翻译遵循 CC BY-SA 4.0 许可协议