Как объяснили другие ответы, невозможно установить переменные SASS и обработать их на клиенте, поскольку SASS преобразуется в обычный CSS во время сборки и когда приложение работает или в браузере APP_INITIALIZER может обрабатывать только CSS.
Я вижу два варианта для достижения того, чего вы хотите.
Как правило, у вас есть базовый CSS для приложения, а затем вам нужно загрузить дополнительный CSS в зависимости от настроек администратора.Что необходимо учитывать с точки зрения css, так это то, что вся специфичность css в дополнительном css должна быть больше базовой css, потому что в противном случае она не будет переопределять базовую.Это требует базовых знаний CSS, поэтому я не буду вдаваться в подробности.
Метод 1
Создайте свой дополнительный CSS по запросу сервера.Загрузите его, когда приложение запускается с URL-адреса сервера.Перезагрузите его с помощью js, когда администратор изменит какие-либо настройки.
- Определите конечную точку бэкенда по адресу
/additional.css (или она может быть похожа на /api/theme/custom-css), которая будет генерировать css из базы данных.Например, у вас есть background=red в дБ, тогда конечная точка должна вернуть
body {background-color: red;}
Добавьте
<link id="additionalCss" rel="stylesheet" type="text/css" href="additional.css" /> в
<head> из
index.html.И этого будет достаточно, чтобы все заработало. Для перезагрузки вы можете использовать разные методы, но я считаю, что это должно сработать
document.getElementById('additionalCss').href = document.getElementById('additionalCss').href;
Это сделает новый запрос к серверуСервер выполнит DB -> css и вернет обновленный css, который будет применен к браузеру.
И если вы хотите быть крутым (или должны поддерживать большие и сложные темы), можно использовать scss.Backend должен генерировать определения переменных scss из базы данных, затем должен использовать какое-нибудь серверное приложение для компиляции scss -> css, а затем передавать скомпилированный css клиенту.Но это будет излишним, если дополнительный css достаточно прост.
Одним из важных соображений этого метода является кеширование в браузере, поскольку контент, стоящий за дополнительным. Css, является динамическим, но браузер может его кешировать, не вызывая серверную часть и обслуживая устаревшиеверсия.
Метод 2
Если вы не хотите или не можете связываться с бэкэндом.Загрузите настройки из БД с помощью некоторой конечной точки API в json, затем сгенерируйте код CSS на клиенте и примените его.
- Используйте HttpClient, чтобы получить настройки JSON и сгенерировать css в виде строки из него.Например, сервер возвращает
{
"background": "red"
}
, затем вы конвертируете это в строку как
cssCode = 'body {background-color: red}';
Использование
let additionalCssStyle = document.getElementById('additionalCss');
if (! additionalCssStyle) {
additionalCssStyle = document.createElement("style");
additionalCssStyle.id = 'additionalCss';
document.head.appendChild(additionalCssStyle);
}
additionalCssStyle.innerText = cssCode;
Чтобы перезагрузить - сохраните изменения в бэкэнд, затем повторите 1. и 2.