Я работаю над сайтом (React через create-react-app, Sass для всех компонентов), чьи CSS и данные управляются URL-адресом. URL-адрес составляется следующим образом:
www.mysite.com/:бренд-:локаль
У каждого из 4 брендов есть свои цвета/шрифты/bg изображения/и т.д. Для каждой локали свой файл данных, так как сайт переведен на несколько языков. Каждая локаль также может иметь уникальные стили.
Примеры:
- www.mysite.com/brand1-en (стили brand1, содержание на английском языке)
- www.mysite.com/brand1-fr-ca (стили brand1, контент для французского и канадского языков)
- www.mysite.com/brand2-pt-br (бренд 2 стиля, контент на португальском и бразильском языках)
- www.mysite.com/brand3-en (бренд 3 стиля, содержание на английском языке)
Сейчас мой проект построен на следующей парадигме:
- Все комбинации брендов и языковых стандартов имеют общий базовый (не фирменный) CSS (определяется в /src для каждого компонента), поскольку структура всех сайтов одинакова.
- У каждого бренда есть файл Sass в /public со стилями, специфичными для бренда.
- Каждая локаль имеет файл Sass, который импортирует файл Sass соответствующего бренда, а также может иметь свои уникальные стили.
- Я использую node-sass для компиляции Sass после запуска сборки и вывожу CSS каждой локали в соответствующую папку.
- Приложение считывает URL-адрес и программно добавляет ссылку на соответствующий файл CSS локали в конец во время выполнения.
- Каждая локаль имеет свой собственный файл данных в соответствующей папке в /public, который извлекается при загрузке приложения (здесь нет проблем, просто к вашему сведению)
Я хотел бы найти лучший способ стилизации сайтов на основе URL, но я не знаю, как это сделать. Я получаю FOUC между загрузкой приложения (показывая небрендированные стили) и добавлением тега CSS в . Кажется, должен быть способ иметь вариации брендов в компонентах, но я не понимаю, как это не заставит CSS для всех брендов загружаться в браузере одновременно.
У кого-нибудь есть какие-нибудь мысли?
