Можно ли переопределить указанные c Bootstrap4 стили / переменные во время выполнения? - PullRequest
Новая
       38

Можно ли переопределить указанные c Bootstrap4 стили / переменные во время выполнения?

0 голосов
/ 19 января 2020

Я унаследовал проект, использующий Bootstrap4 для макета и стилей, но теперь мне нужно поддерживать горячую замену некоторых базовых стилей (например, цвет шрифта, основной и фоновый цвета) во время выполнения.

Сайт работает в одной теме bootstrap стилей, но некоторым пользователям - после входа в систему - необходимо перезаписать некоторые значения root.

Все найденные мной посты / советы касаются создания собственной темы при сборке - этот подход, хотя и возможный, требует отдельной сборки каждый раз, когда мы добавляем новый вариант клиента. В идеале нам нужна единая центральная тема, которую мы можем переписать несколькими пользовательскими стилями - в идеале внедрить из вызова API.

В стеке используется Meteor 1.8 с Blaze в качестве инфраструктуры пользовательского интерфейса - хотя я не знаю любые собственные методы в пределах тех, которые обрабатывают это, так что ожидайте, что ему понадобится либо: * чистое JS решение, такое как условное требование файла css *, динамически создающее таблицу стилей, например 

var style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('#target {color: white}');

1 Ответ

0 голосов
/ 26 февраля 2020

Из того, что я понимаю в вашем посте, вы должны взглянуть на пакет DocHead от kadirahq (https://github.com/kadirahq/meteor-dochead).

Я использовал Session здесь, чтобы сохранить выбранную тему. Могут быть и другие способы сделать это, но у меня это работает нормально.

Я использовал его, чтобы позволить любому пользователю выбрать свою собственную тему bootstrap.

Например, вы может иметь выбор, содержащий ваши стили: 

<select>
    <option id="themes/first.css">First</option>
    <option id="themes/second.css">Second</option>
    <option id="themes/third.css">Third</option>
</select>

Затем вы можете выбрать тему по умолчанию в onRendered, например: 

Template.myTemplate.onRendered(function() {
    if (Session.get("theme") != undefined) {
        DocHead.addLink(Session.get("theme"));
        document.getElementById("selectedTheme").value = Session.get("themeName");
    }
});

Добавить помощника: 

getThemeName() {
    return Session.get("themeName");
}

И, наконец, обработчик событий на ваш выбор: 

'change select'(event) {
    DocHead.removeDocHeadAddedTags()
    Session.setPersistent("themeName", event.target.value);
    var themeURL = event.target.selectedOptions[0].id;
    var linkInfo = {rel: "stylesheet", href: themeURL};
    Session.setPersistent("theme", linkInfo);
    DocHead.addLink(linkInfo);
},

Я удалил эту функцию из своего проекта несколько месяцев go, поэтому могут возникнуть некоторые проблемы, но она должна работать.

Удачи:)

...