在Angular 2中逐步推出每个模块的新样式指南

Question

处理大型应用程序。我们必须逐页推出新的全局样式表。模块基础。可以理解，这不是最好的方法。每个模块推出新的全局样式表的最佳方法是什么？在每个新页面上尝试过类似下面的内容，并引用旧页面上的旧样式表。

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

然而，这种方法会导致FOUC（无格式内容的Flash）。愿意接受。

Answer 1

您应该能够以这种方式实现目标 - '../../../node_modules/path-to-new-stylesheet/index.scss'，但我看到您使用ViewEncapsulation.None，我可以问为什么？当您使用它时，Angular会将样式应用于文档标题而不添加.cssClass[_ngcontent_c1] { /* styles */ }之类的标记，因此如果您检查文档，则会看到：

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

因此，当您使用ViewEncapsulation.None初始化此组件时，其样式将添加到文档标题中（这可能解释了FOUC），并且很可能会覆盖其他组件的样式。