Webpack - замена строк в операторах SASS / SCSS '@import'

Question

В настоящее время дорабатывается сборка общего веб-пакета для 4 идентичных сайтов, где стилизация отличается только переопределением переменных для конкретного сайта в SASS и ищет способ динамически заменять ссылки @import в верхней части файлов SASS до sass-loader или css-loader работает и SASS компилятор работает.

Например, такой компонент, как text-input.scss, может иметь следующую структуру:

@import '../../styles/global/_variables.scss';
@import '../../styles/<<<SITENAME>>>/_variables.scss';

.some-class {
    ...
}

Я хотел бы получить способ заменить строку <<<SITENAME>>> на переменную env.sitename, переданную во время сборки, до запуска компилятора SASS / SCSS.

пример:

webpack env.sitename=site1 --progress --config ./wp.config.js

В результате к моменту запуска sass-loader файлы с заменой строк будут выглядеть в компиляторе SASS следующим образом:

@import '../../styles/global/_variables.scss';
@import '../../styles/site1/_variables.scss';

.some-class {
    ...
}

Я попытался string-replace-loader, но не смог заставить его работать и выполнять замены до того, как компилятор SASS попытался разрешить все имена файлов, что имеет смысл, учитывая, как работает разрешение модуля webpack.

Есть ли плагин или загрузчик, который может решить эту проблему из веб-пакета?

Спасибо