多次使用@import 会重复 css 吗？

Question

我有一个 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 编译器是否足够聪明来处理这个问题？

Answer 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。