Angular 6和component.css

Question

在“最新” Angular 6中：

由於某些原因，我在component.css文件中定義的樣式不適用。

我相信這在早期版本的angular中是可行的，並且一定有理由將文件放在首位嗎？

我已經對其進行了Google搜索，發現可以在組件聲明中設置encapsulation: ViewEncapsulation.Native ，但是隨后會忽略全局CSS。

誰能解釋為什么？ 最終如何正確執行此操作？

Answer 1

對於解釋為什么設置封裝的原因：ViewEncapsulation.Native不起作用

原因是您告訴angular制作了組件的影子根，並僅應用了其本地的css。 這意味着在組件內部使用style或styleUrl指定的style僅適用於它。

對於正確的做法是...

如果您希望使組件與全局提供的樣式以及本地提供的樣式一起使用，

1.將所有樣式規則放在位於項目目錄根目錄的style.css中。 這將全局適用於所有組件

2.在處理組件本身的CSS文件時，請確保您在./以下styleUrl: ./component.css ./ styleUrl: ./component.css

我鼓勵您通過這些資源來獲得更好的知識

https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

https://angular.io/guide/component-styles