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

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

Есть общая закономерность?