Отдельная SCSS для разных угловых модулей

Question

Есть ли способ разделить scss на отдельные модули. Подробно, если у меня есть 2 модуля с именами module_1 и module_2 и 2 файла scss с именами module_1.scss и module_2.scss. Я хочу, чтобы мой угловой модуль_1 загружал другие scss, кроме module_2.scss, и аналогично для модуля_2 я не хочу загружать module_1.scss. Как я могу добиться этого в угловых.

Заранее спасибо.

Answer 1

Поскольку angular имеет стили, импортированные на уровне компонента, вы можете создать module_1.scss и module_2.scss - и затем для каждого компонента уровня контейнера в модулях добавить соответствующий файл scss в массив стилей

Пример module_1> component_foo

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html',
  styleUrls: ['../module_1.scss']
})

Пример module_2> component_bar

@Component({
  selector: 'app-bar',
  templateUrl: './bar.component.html',
  styleUrls: ['../module_2.scss']
})

В связи с этим я бы порекомендовал попытаться сгруппировать компоненты в родительские «контейнеры» другого small / dumb childкомпоненты, поэтому только родительские элементы должны импортировать стили