Динамический требует с Webpack и Angular

Question

Моя цель состоит в том, чтобы динамически требовать, не объединяя все зависимости на одном уровне, поскольку в какой-то момент у меня может быть 50 брендов.

Моя структура была бы такой:

-src/app
-theming
--default
--brand_1

Вот пример углового компонента:

import { Component } from '@angular/core';

const brand = 'brand_1';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [`../../theming/${brand}/style.scss`]
})
export class AppComponent {
  title = 'app';
}

Проблема в том, что требуется создать карту со всеми папками братьев и сестер и получить их содержимое.

`webpack:///C:/Users/JeanB/work_projects/playground/angular-advanced-branding/theming ^\.\/.*\/style\.scss$`
…
var map = {
  "./brand_1/style.scss": "../../../../../theming/brand_1/style.scss",
  "./default/style.scss": "../../../../../theming/default/style.scss"
};

Как видите, моя переменная интерпретируется как подстановочный знак, как и ожидалось из документации веб-пакета.

Знаете ли вы, как предотвратить это? Я вижу два выхода, один из них - использовать systemJS, которая лучше поддерживает динамические требования. Другой - более экспериментальный, с контекстной опцией require в webpack.

Любая помощь приветствуется!

-- Обновить

После дня исследований я пришел к тому, что Angular не поддерживает интерполированные значения urlStyles.

Webpack делает то, что должен, с тем, что ему дает webpack, а это требование ('blabla' + variable + '.scss').

SystemJs не имеет такого же поведения, но пока выходит за рамки. Я обновлю билет, когда у меня будет решение.