Angular 上的 SASS 主题答案

【问题标题】：SASS Theming on AngularAngular 上的 SASS 主题
【发布时间】：2022-08-08 20:27:08
【问题描述】：

根据How to implement switchable themes in scss? 的问题（尤其是来自this Medium post 的想法的第二个答案），我尝试通过SASS 在我的项目中实现主题。
但我不能让它工作。

我创建了a stackblitz，以便更容易解释和查看问题：

在主要组件上，它按预期工作，在app.component.html 中切换主题（在主题一和主题二) 更改<p> 的颜色。

但是在子组件（称为<my-component>）上，相同的规则被导入到 SASS 文件中，但在那里不起作用。
看到下划线规则（在mixin中声明），所以已经导入，但是切换主题时颜色没有变化。
如果我调试（在 SASS 中使用 @debug），我可以看到颜色是从 $theme-map 正确获取的，但看起来它们没有返回。

这是与 Angular 封装/作用域相关的已知问题吗？有没有办法让它工作？

这难道不是因为您没有将组件的内容包装在类为 \"theme-two\" 的 div 中吗？
@Alex这个想法是只在主标签中切换主题，这样所有子标签都会受到影响
Angular 默认使用样式封装，因此出于所有意图和目的，您的子组件不在该标记中。你要么需要给你的子组件 ViewEncapsulation.None 或者在你的styles.css而不是你的组件css中应用那个样式。

标签： angular sass

【解决方案1】：

这是由于Angular's encapsulation。
由于主题是在app.commponent 中定义的，因此通过 SASS mixin 生成的规则将仅在此文件中有效。

如果您希望在整个项目中使用 mixin，则必须更改组件的封装，或使用 (deprecated) 选择器 ::ng-deep 使其在您的应用程序中成为全局：

@mixin themify($themes: $themes) {
  @each $theme, $map in $themes {
    // ↓ here 
    ::ng-deep .theme-#{$theme} & {
      
    }
  }
}

这是经过此修改的updated stacbklitz。
您可以看到主题系统现在正在全球范围内运行。

【讨论】：