8

我有一个 Angular CLI 应用程序，我正在@import '~@angular/material/theming';全球范围内使用styles.scss. 我还有一个组件，我想在该组件的 .scss 文件中定义一个 css 类，该文件使用一些 Angular Material 排版：

@import '~@angular/material/theming';

$config: mat-typography-config();

.myClass {
  font-size: mat-font-size($config, title);
  font-weight: bold;
}

通过在我的应用程序中多次导入~@angular/material/theming，它是否会多次包含该 css 并使我的有效负载膨胀？还是 Angular CLI 编译器足够聪明来处理这个问题？

4

1 回答 1

1

如果您将相同的 CSS 导入到多个组件中，那么是的，CSS 将被复制，但每次都将其范围限定为该组件。

例如，如果您有以下...

产品列表.component.css：

@import '../../foo.css';
...

顶栏.component.css：

@import '../../foo.css';
...

../../foo.css：

a { color: red; }

标签中的 css 输出将如下所示：

<style>
   a[_ngcontent-gna-c48] { color: red; }
   ...
</style>

<style>
   a[_ngcontent-gna-c50] { color: red; }
   ...
</style>

这是基于 Angular 的入门示例项目的完整 StackBlitz。

于 2022-01-30T17:11:00.050 回答