在 scss 中导入全局样式而不在每个组件上复制 scss答案

【问题标题】：Importing global styles in scss without duplicating scss on each component在 scss 中导入全局样式而不在每个组件上复制 scss
【发布时间】：2019-05-09 10:54:28
【问题描述】：

我有一些 scss 文件，其中包含一些 atomik 类：

atomik.scss

.w-100 { width: 100%}
.w-75 { width: 75%}
.w-60 { width: 60%}
[...] //dozens of others classes

我可以在 HTML 中使用它们：

<div class="w-100">

或在其他scss 文件中：

foo.component.scss

 @import 'atomik'
 .foo {
   @extend .w-100;
   [...]
 }

一开始看起来很整洁，直到我意识到整个 atomik.scss 文件被复制到每个导入它的组件中。这似乎是 scss 的预期行为。

生成的foo.component.js

[...]
  styles: ["
  .w-100 { width: 100%};
  .w-75 { width: 75%}
  .w-60 { width: 60%}
  [...] //dozens of others classes
  .foo {
    width: 100%
  }"]
[...]

placeholders 似乎有一个解决方案。

atomik.scss 会变成：

%w-100 { width: 100%}
%w-75 { width: 75%}
%w-60 { width: 60%}
[...] //dozens of others classes

和 foo.component.scss 会变成：

@import 'atomik'
.foo {
  @extend %w-100;
  [...]
}

以及生成的foo.component.js：

[...]
  styles: ["
  .foo {
    width: 100%
  }"]
[...]

很好！但是...现在 atomik 类不能再在 HTML 中使用了：

<div class="%w-100"> <!-- will be interpreted as class %w-100 -->

如何使这些 CSS 属性在 HTML 中可重用，而无需手动重新定义将全局声明的 scss 中的所有属性。

有共同的模式吗？

【问题讨论】：

如果 atomik.scss 是全局的，你可以在 Angular 提供的 style.scss 上使用 @import 'atomik'。或通过angular.json 导入
@penleychan 我不明白。据我了解，这不会使这些属性可以从 HTML 访问。占位符的行为就像 scss 变量。

标签： angular sass

【解决方案1】：

默认情况下，全局 style.scss 中声明的所有类都可用于 Angular 应用程序中的所有组件。您应该在 style.scss 中添加任何此类广泛使用的样式表，以使其可用于整个应用程序。

您可以在styles.scss 中导入您的atomik.scss，它会解决您的问题。请注意此处scss 文件的导入顺序，如果有多个导入，您最终可能会覆盖少数类。还要确保atomik.scss 的编写方式可以应用于其他组件（考虑到父子样式类）。

【讨论】：