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

Question

我有带有 Material 主题的标准 Angular 9 应用程序。我们遇到了 bundle 大小增加的问题，并发现我们对 scss 样式的重用导致了这种增加。问题是导入的 scss 已按照此 blog 中所述编译到组件中.

最初我们想在我们的 Angular 组件中重用 Material 主题变量，如下所示

@import './theme.scss';

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

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

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

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

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

这引出了我的问题:在组件样式中是否推荐使用重用 Material 主题颜色？我不敢相信我的问题的“解决方案”是将组件样式移动到全局样式!？

期待有用的答案!干杯!

Answer 1

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

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

例子:

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

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