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

【问题标题】：Angular 9 / Material - Reuse of material theme variables in angular components styleAngular 9 / Material - 在角度组件样式中重用材质主题变量
【发布时间】：2021-03-18 04:28:36
【问题描述】：

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

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

@import './theme.scss';

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

为了解决这个问题，我们按照blogs.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 样式那么大。

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

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

【问题讨论】：

标签： css angular-material scss-mixins angular9

【解决方案1】：

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

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

例子：

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

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

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;
}

【讨论】：

【解决方案2】：

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

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

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

Theme

【讨论】：