Question

我在材质主题方面有标准的angular 9应用程序。我们遇到了束大小增加的问题，发现我们对scss样式的重用导致了这种增加。问题是导入的scss像本blog所述在组件中进行了编译。

最初，我们希望按如下方式在角度组件中重用材质主题变量

@import './theme.scss';

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

为解决此问题，我们遵循了blogs。建议，以移动诸如全局样式或使用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

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

有一种叫做“部分”的东西。您可以为各种事物创建部分，并在您的 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;
}

Answer 2

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

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

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

Theme

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

2 个答案: