Css 如何使用angular 5在SPA中使用多个主题

需要为单个页面应用程序集成多个主题的帮助。我的web应用程序有一个登录页，它是一个html模板，我的应用程序的其余部分使用另一个主题。当我有一个索引html时，如何避免主题样式冲突？问题是，登录页面主题应该是我的应用程序根URL，以及使用与登录页面主题相同样式的登录/注册页面。其余样式取决于我在其余应用程序中使用的其他主题。因此，在这样做时，我面临严重的样式冲突。非常感谢您的帮助。提前感谢

要为特定页面封装样式，您应该使用其组件的样式表，而不是全局样式表

如果需要导入样式，应避免在全局样式表中进行导入。您可以为特定组件导入外部样式，或者如果许多组件具有相同数量的公共样式表，则可以使用所需的所有导入创建公共样式表

---

这应该考虑到主题设置的灵活性。

我会用咕噜声/咕噜声来解决这个问题。在自己的存储库中将html和css与应用程序分开。将基本模板放在一个目录中，并让grunt/gulp将它们复制到部署目录。然后覆盖SPC模板目录中的所有文件。假设你有这个结构

base-template/
  index.html
  other-template.html

my-template/
  other-template.html

现在，当您复制它们时，您将拥有来自基本模板的

index.html

，以及来自特定模板的

other template.html

文件，而原始模板没有更改

---

您可以对css文件或任何其他资产应用类似的策略

我尝试在该特定组件中添加导入，但我有一个全局样式的styles.css文件。因此，该文件与组件css冲突。该styles.css文件被添加到angle-cli.json样式数组中。通常，组件的css优先于全局css。我建议除了重置或设置按钮、页眉和页脚等组件的样式之外，不要使用任何全局CSS，但在您的情况下，由于应用程序中有多个主题，您可能也希望避免此问题。我尝试将登录页主题添加到其自己的组件css文件中，但其中有一些背景url，这会在构建时出错。如果您提供资产，请确保将其放在资产文件夹中，然后给出其相对路径。