css - Angular 9 / Material - 在角度组件样式中重用材质主题变量

Question

我有带有材料主题的标准 angular 9 应用程序。我们遇到了捆绑包大小增加的问题，并发现我们对 scss 样式的重用导致了这种增加。问题是导入的 scss 是在本博客中所述的组件中编译的。

最初，我们想在我们的角度组件中重用材质主题变量，如下所示

@import './theme.scss';

test{ background-color: mat-color($app-primary) }

为了解决这个问题，我们按照博客.advice 将此类代码移动为全局样式或使用 sass mixins。我们按照以下方式实现了 sass-mixins，并在我们的组件样式中重用了它：

@mixin primary-background-color {
  background-color: mat-color($app-primary);
}

@import 'mixins.scss'
  .test {
    @include primary-background-color;
  }

尽管如此，按照这个建议，通过使用 sass-mixins 包的大小略有减少，但不如我们将整个代码移动到 gobal 样式那么大。

这导致了我的问题：在组件样式中是否推荐使用重用材料主题颜色？我不敢相信我的问题的“解决方案”是将组件样式移动到全局样式！？

期待有帮助的回答者！干杯!

标签： cssangular-materialscss-mixinsangular9

Answer 1

我遇到了同样的问题，但已经解决了。

我认为最好的解决方案是这个链接

我还在我的主题中添加了一个背景变量，可以在不同的组件中重用，如下图所示。

主题