Моя команда и я в настоящее время работаем над приложением с несколькими шаблонами / скинами. Это означает, что есть базовый стиль и несколько стилей перезаписи или пользовательских стилей. Мы используем Sass.
Каждый месяц создается новый шаблон, это означает, что файлы стилей увеличиваются в размере и количестве.
В настоящее время мы создаем один пакет CSS с использованием Webpack. Приложение (React) импортирует этот пакет. Только некоторые стили применяются в зависимости от того, какой шаблон мы используем. Невозможно переключаться с одного шаблона на другой во время выполнения. Используемый шаблон определяется на стороне сервера с использованием идентификатора. Мы просто используем этот идентификатор в качестве класса корневого элемента, поэтому к нему и его дочерним элементам применяются только необходимые стили.
Подход сработал для нас до сих пор, потому что есть только несколько шаблонов. Но мы знаем, что это потенциально повлияет на время загрузки, если будет создано все больше и больше стилей.
Мы думали о создании нескольких пакетов во время сборки, но нам все еще нужно будет получить только ОДИН, который нам нужен во время выполнения. Таким образом, мы бы не брали большой пакет с сервера.
Я хотел бы услышать некоторые предложения и что было бы хорошим подходом для достижения этой цели.
Спасибо за ваше время.