Хорошо, так что я могу ошибаться, так что терпите меня. Если вы думаете, что решение идет совсем в другом направлении, скажите, пожалуйста.
В моей компании есть приложение в стиле "монолит", и его становится сложно поддерживать. Мы начали процесс разбивки всего на различные «микро» приложения, как микро-сервисы, так и микро-интерфейсы. В настоящее время я работаю над прототипом нашего первого микро-интерфейса.
Мы полностью реагируем, поэтому мы используем простой подход - просто иметь библиотеки компонентов, которые экспортируют родителя своей конкретной «страницы», а затем просто импортируем эту страницу в проект оболочки, который содержит только панель навигации. , реагирующий маршрутизатор и т. д.
Во всяком случае, большая проблема с этим разделением - наши переменные SCSS. У нас есть такие вещи, как цвета, размеры и т. Д., Все из базового файла переменных SCSS. Это не было бы таким большим делом, за исключением того факта, что у нас есть два отдельных интерфейса для нашего приложения. В основном два отдельных портала, которые совместно используют множество одинаковых элементов пользовательского интерфейса, с некоторыми отличиями, для разных групп пользователей. Это еще одна причина, по которой мы идем по этому пути, микро-интерфейсы облегчат обмен функциями пользовательского интерфейса. Однако каждый из этих двух порталов имеет разные цветовые палитры и другие элементы, чтобы отличать их.
Итак, что все это значит? Это означает, что у меня есть файлы SCSS, которые выглядят так:
@import '../../assets/css/variables';
.delete-text {
color: $color-secondary;
}
«$ color-second» - это переменная из файла импортированных переменных. Наши два портала имеют отдельные файлы переменных. Все имена идентичны, но значения разные.
Так что я сижу здесь, уставившись на эти файлы SCSS и удивляясь, как я могу заставить их условно использовать разные наборы переменных. Тот факт, что я не могу сделать условный импорт, является проблемой.
Это проект React. Отдельные библиотеки (или наши микро-интерфейсы) создаются только с помощью Babel, наши основные проекты импортируются в Webpack. Идеи будут оценены.