Angular 9 / Material - 在 angular 组件样式中重用 material 主题变量

Question

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

最初我们想在 angular 组件中重用 material 主题变量

@import './theme.scss';

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

为了解决这个问题，我们遵循 blogs. 建议将此类代码移动为全局样式或使用 sass 混入。我们实现了 sass-mixins 如下，并在我们的组件样式中重用它：

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

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

然而，按照这个建议，通过使用 sass-mixins，包的大小减少了一点，但没有我们将整个代码移动到 gobal 风格那么多。

这导致了我的问题：在组件样式中是否有建议使用重用 material 主题颜色？我不敢相信 "solution" 我的问题是将组件样式移动到全局样式！？

期待有用的答案！干杯!

Answer 1

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

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

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

Theme

Answer 2

您可以用不同的方式进行此操作：

有一种东西叫做'partials'。您可以为各种事物创建部分，并在 component.scss 文件中 include/import 并使用它们

示例：

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

部分文件的文件名以下划线开头，例如 _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;
}

Angular 9 / Material - 在 angular 组件样式中重用 material 主题变量

Angular 9 / Material - Reuse of material theme variables in angular components style

css

angular-material

scss-mixins

angular9