Я работаю над сайтом (реагирует через create-react-app, Sass для всех компонентов), чьи CSS и данные управляются URL. URL составлен следующим образом:
www.mysite.com/: brand-: locale
Каждый из 4 брендов имеет свои собственные цвета / шрифты / изображения bg / et c. Каждая локаль имеет свой собственный файл данных, поскольку сайт переведен на несколько языков. Каждый языковой стандарт также может иметь уникальные стили.
Примеры:
- www.mysite.com/brand1-en (фирменный стиль, Engli sh контент)
- www.mysite.com/brand1-fr-ca (фирменный стиль , Французское канадское содержание)
- www.mysite.com/brand2-pt-br (фирменные стили 2, португальский бразильский контент)
- www.mysite.com/brand3-en (фирменные стили 3, Engli sh контент)
Прямо сейчас мой проект построен на следующей парадигме:
- Все комбинации бренда и локали имеют общую базу (без маркировки) CSS (определено в / sr c для компонента) как структура всех сайтов одинакова
- Каждый бренд имеет файл Sass в / publi c со спецификацией бренда c стилей
- В каждой локали есть файл Sass, который импортирует соответствующий файл бренда Sass, а также может иметь свои собственные уникальные стили
- Я использую node-sass для компиляции Sass после запуска сборки и выводит CSS каждой локали в соответствующую папку
- . Приложение считывает URL-адрес и программно добавляет ссылку на соответствующий файл CSS локали конец во время выполнения
- Каждая локаль имеет свой собственный файл данных в соответствующей папке в / publi c, который извлекается при загрузке приложения (здесь нет проблем, только для справки)
Я хотел бы найти лучший способ оформления сайтов на основе URL, но я не знаю, как это сделать. Я получаю FOU C между загрузкой приложения (с отображением фирменных стилей) и добавлением тега CSS. Кажется, что должен быть способ иметь различия в брендах компонентов, но я не понимаю, как это не заставило бы CSS для всех брендов загружаться в браузер одновременно.
У кого-нибудь есть мысли?