Question

我有一些包含一些原子类的scss文件：

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

如何在不手动重新定义将被全局声明的scss中的所有属性的情况下，使这些CSS属性在HTML中可重用。

有共同的模式吗？

Answer 1

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

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

在scss中导入全局样式，而不必在每个组件上重复复制

1 个答案: