Angular 6 不应用 scss 样式
Posted
技术标签:
【中文标题】Angular 6 不应用 scss 样式【英文标题】：Angular 6 not applying scss styles 【发布时间】：2018-12-04 14:06:01 【问题描述】：我有一个组件页面和相应的样式表，但是 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 文件
bodycolor:Red !important
app-product-detailpage
h1color:red !important
但是我注意到的一件事是，如果我对全局 styles.css 进行更改，它可以正常工作。只是为了检查我将身体颜色更改为绿色并且它可以工作。
我的 Angular 应用程序配置为使用 scss。可能是什么原因？有人可以建议吗？
【问题讨论】：
我有一个类似的问题，并使用“encapsulation.none”解决。我使用 rootViewRef 以编程方式渲染组件，所以它没有自己的 shadow dom。 这是正确答案***.com/a/46218064/589227 请看这篇文章，上面有很多solition (angular.io/guide/component-styles) 【参考方案1】：您的 SCSS 不适用于您的 HTML 文件product-detailpage.component.html。
原因是 Angular 使用 shadow DOM 作为组件。这意味着标签 <body> 和 <app-product-detailpage> 在您的组件中找不到。
【讨论】：
不，不正确 默认情况下，Angular 模拟样式封装，当您将视图封装设置为原生ViewEncapsulation.Native 时，它使用影子 DOM
blog.thoughtram.io/angular/2015/06/29/…【参考方案2】：
根据documentation，组件中指定的样式只能应用于其模板，不包括组件。
这就是为什么您的样式在组件的 style.scss 中无法在组件上运行但在全局样式表中运行良好的原因。
一种方法是使用:host 伪选择器，就像this documentation 一样，它允许在放置组件的容器上添加样式。
文档说 -
The :host selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template. The host element is in a parent component's template.
【讨论】：
【参考方案3】：因为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;
但最后我建议你使用 global scss 文件来定义<web component> 的样式。
【讨论】：
ViewEncapsulation.Native 已弃用，请改用 ViewEncapsulation.ShadowDom。 angular.io/api/core/Component#encapsulation以上是关于Angular 6 不应用 scss 样式的主要内容，如果未能解决你的问题，请参考以下文章
在 Angular 6+ (styleExt) 中使用 scss 作为默认样式表
NativeScript/Angular - 如何导入全局样式？