Angular 8：防止在延迟加载模块中加载全局样式表答案

【问题标题】：Angular 8: Prevent loading global stylesheet in lazy loaded moduleAngular 8：防止在延迟加载模块中加载全局样式表
【发布时间】：2020-05-21 09:50:20
【问题描述】：

这是我的问题：我在全局 styles.scss 文件中设置了一些样式规则。所有的代码库都在 app.module 中。我正在尝试创建一个延迟加载的模块，但有人全局覆盖了一些有角度的材料样式，这些样式导致我的延迟模块中的组件出现问题。删除这些覆盖的规则不是一种选择，因为这会导致 app.module 中的某些小部件损坏。

假设我创建了一个名为exclude.scss 的新文件，并将这些规则放入该文件中。有什么方法可以配置它，以便 app.module 仍然消耗 exclude.scss 而lazy.module 没有？将它放在 angular.json 样式数组中仍然会产生相同的输出。

重申一下，我不想向我的延迟加载模块添加一些规则，我想要一个删除一些全局规则的配置。 app.module 仍然可以使用这些规则但惰性模块不必使用的配置。

感谢任何帮助。

编辑：

被覆盖的样式来自角度材料形式：

.cdk-global-overlay-wrapper,
.cdk-overlay-container {
  z-index: 9999 !important;
}

我知道这是一个糟糕的模式，这就是我需要摆脱它的原因。问题是，这些类的行为不像普通的用户添加的类，所以很多可能的方法都行不通。

【问题讨论】：

您可以尝试使用更高的选择器封装要排除的规则，例如:not(.lazy) { /*all rules to exclude here*/}，并从你的惰性模块的路由中将 lazy 类设置为 body
@David 谢谢。这是一个好主意，并且适用于大多数情况。但有问题的风格是物质的。所以这行不通。请参阅编辑。
如果我没记错的话，您可以将类添加到叠加层。这种方式可以针对特定的材料成分吗？

标签： angular sass

【解决方案1】：

Angular 应用程序中style.scss 的工作流程首先是根，然后是延迟加载模块，例如，您可以更改 @import 库

在你的全局样式表中

@import Firststylesheet.scss @import Secondstylesheet.scss @import Thirdtstylesheet.scss

将使用您在第三个样式表中导入的任何内容

如果是延迟加载的模块......它应该将您的样式表附加到全局样式表之后的标题中。

另一种方法是你可以使用@extend

【讨论】：

如果我没记错的话，就是第一张和第二张被覆盖了。第三个获胜。
To reiterate, I do not want to add some rules to my lazy-loaded module, I want a config that removes some global rules. A config in which app.module can still use those rules but lazy module does not have to. ---> 回答你这部分.. 你可以在你的延迟加载模块中使用 forRoot() 函数，就像引导程序使用配置一样.. 希望有帮助