Импорт глобальных стилей в scss без дублирования scss на каждом компоненте

Question

У меня есть несколько файлов 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%
  }"]
[...]

Кажется, есть решение с заполнителями .

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, которые будут объявлены глобально.

Существует ли общий шаблон?

Answer 1

Все классы, объявленные в глобальном style.scss, по умолчанию доступны для всех ваших компонентов в вашем угловом приложении.Вы должны добавить любую такую ​​широко используемую таблицу стилей в style.scss, чтобы сделать ее доступной для всего приложения.

Вы можете импортировать atomik.scss в styles.scss, и она решит вашу проблему.просто будьте осторожны с порядками импорта файлов scss здесь, если есть несколько импортов, вы можете переопределить несколько классов.Также убедитесь, что atomik.scss написано так, чтобы его можно было применять к другим компонентам (учитывая классы родительско-дочерних стилей).