I am working on a site (React via create-react-app, Sass for all components) whose CSS and data are driven by the URL. The URL is made up like so:
www.mysite.com/:brand-:locale
Each of the 4 brands has its own colors/fonts/bg images/etc. Each locale has its own data file as the site is translated in several languages. Each locale may also have unique styles.
Examples:
- www.mysite.com/brand1-en (brand1 styles, English content)
- www.mysite.com/brand1-fr-ca (brand1 styles, French Canada content)
- www.mysite.com/brand2-pt-br (brand 2 styles, Portuguese Brazil content)
- www.mysite.com/brand3-en (brand 3 styles, English content)
Right now my project is built on the following paradigm:
- All brand-locale combinations share base (un-branded) CSS (defined in /src per component) as the structure of all the sites is the same
- Each brand has a Sass file in /public with brand-specific styles
- Each locale has a Sass file that imports the appropriate brand Sass file, and can also have its own unique styles
- I am using node-sass to compile Sass after a build runs, and outputs each locale's CSS into its respective folder
- The app reads the URL and programmatically adds a reference to the appropriate locale CSS file to the end of at runtime
- Each locale has its own data file in a respective folder in /public which gets fetched when the app loads (no issues here, just FYI)
I would like to find a better way of styling the sites based on URL, but I do not know-how. I get FOUC between the app loading (showing un-branded styles) and the addition of the CSS tag to . It seems that there should be a way to have brand variations in components, but I don't see how this would not force the CSS for all brands to load in the browser at once.
Does anyone have any thoughts?
