在Angular 2中逐步為每個模塊推出新樣式指南

Question

在大型應用程序上工作。 我們必須逐頁推出新的全局樣式表。 模塊基礎。 可以理解，這不是最好的方法。 每個模塊推出新的全局樣式表的最佳方法是什么？ 在每個新頁面上都嘗試了以下類似的操作，並在舊頁面上引用了舊樣式表。

selector: "new-page",
templateUrl: "./new-page.component.html",
styleUrls: [
    '../../../node_modules/path-to-new-stylesheet/index.scss'
],
encapsulation: ViewEncapsulation.None

但是，這種方法會導致FOUC（未樣式化內容的閃爍）。 開放的想法。

Answer 1

您應該能夠以這種方式實現您的目標- '../../../node_modules/path-to-new-stylesheet/index.scss' ViewEncapsulation.None '../../../node_modules/path-to-new-stylesheet/index.scss' ，但我看到您使用ViewEncapsulation.None ，請問為什么？ 使用它時，Angular會將樣式應用於文檔標題，而無需添加其標簽，如.cssClass[_ngcontent_c1] { /* styles */ } ，因此，如果檢查文檔，您會看到：

<styles> .cssClass { /* styles */ } </styles>

因此，當您使用ViewEncapsulation.None初始化此組件時，其樣式將添加到文檔標題（這可能解釋了FOUC），並且很可能會覆蓋其他組件的樣式。