时间戳

首页 > 解决方案 > 在 scss 中导入全局样式而不在每个组件上复制 scss

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

问题描述

我有一些包含一些 atomik 类的 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 -->

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

有没有共同的模式？

标签： angularsass

解决方案

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

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

推荐阅读