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，bundle 的大小会减少一点，但不会像我们将整个代码移动到全局样式那样多。

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

期待有帮助的答案！ 干杯!

Answer 1

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

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

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

主题

Answer 2

你可以用不同的方式来做到这一点：

有一种叫做“部分”的东西。 您可以为各种事物创建部分并将它们包含/导入到您的 component.scss 文件中并使用它们

例子：

在您的根级别，创建一个名为样式的文件夹。 在样式中，您可以创建多个部分，一个用于变量，一个用于混合，一个用于字体等，

部分文件名以下划线开头，例如 _variables.scss、_mixins.scss 等。下划线将阻止 angular 编译器每次编译。

In '_variables.scss' file, you can create multiple global variables for colors, such as 

$primary-color: #fff;
$secondary-color: #333; etc

In '_mixins.scss' you can create mixins such as 
@mixin mixin-name() {
  mixins functionality
}


In your component.scss file, simply import them and use it. 

component.scss

@import '../styles/mixins';
@import '../styles/variables';

.component-class-name {
 background-color: $primary-color;
 color: $secondary-color;
}