0

I recently inherited an existing web application built in ReactJS. I'm not an expert in either React or SASS, but as best I can tell, this app handles styling by...

  1. Having a bunch of small .scss files, split up logically by things like color variables, font faces, button styling, etc.

  2. Importing all of those into one big app.scss file.

  3. Importing that into the index.jsx of the React app.

I've confirmed that changes to the partial files correctly cascade throughout the whole app.

Now, my employer wants to implemented white-labeling of this application, and part of that means letting our customers change certain things in the stylesheet, such as colors. My instinct is that I could, for example, create a new partial scss file for each of our customers, with different values for the color variables, and load this instead of the default _colors.scss that always gets loaded at the moment.

However, given the import flow, I'm not sure this is possible. I won't actually know which customer is using the app until the app has loaded and called the server--meaning the SASS has already been compiled and served, so it's much too late to intercept the imports during React compilation.

Am I understanding correctly, and if so, is there a best practice or "SASS way" for switching or overwriting stylesheets dynamically? Could React import a new stylesheet, or even recompile the SASS while running?

Off the top of my head, all I can think to do is load a new stylesheet from the server with selectors for every element that needs its styling overwritten, and that would be extremely fragile (and probably loaded with !important). I would love to find a cleaner way to do this.

Ninja Edit: I suppose I could also pull the changeable styles out of the SASS environment into their own stylesheet and do something like this: Dynamically load a stylesheet with React. But I think that would be a mess, as I would be abandoning SASS's ability to define variables, and the color variables (for example) are everywhere.

Thanks so much for any advice or guidance! Let me know if I can provide any more information.

Nat Webb
  • 669
  • 1
  • 7
  • 18
  • 2
    I would think of using css variables instead – Konrad Feb 14 '23 at 15:46
  • @Konrad Can you elaborate on how that would work? Wouldn't I still run into a timing issue, where the stylesheet that relies on the variable is loaded before the stylesheet that defines the variable? Or does that not matter for CSS variables? – Nat Webb Feb 14 '23 at 15:54
  • 1
    CSS variables can be changed in runtime, the order doesn't matter – Konrad Feb 14 '23 at 15:55
  • @Konrad Very interesting, thank you! I see that CSS variables also allow fallbacks--so I could use my original SASS vars as the fallbacks, then overwrite the CSS vars with the whitelabel values as needed. That sounds pretty tidy to me! – Nat Webb Feb 14 '23 at 16:11
  • 1
    See this article as a reference: https://blog.logrocket.com/a-guide-to-theming-in-css/ You could change all Sass variables tied to theme into CSS custom properties. That would be only change to your Sass stylesheet. From there you can switch theme via JS – Teo Dragovic Feb 14 '23 at 16:41
  • Unfortunately, it appears that this solution won't work for my particular situation. The application uses Bootstrap, which runs a number of SASS functions at compile time to generate various alternate colors. As best I can tell, these functions break on the CSS variable, even if it's defined beforehand. – Nat Webb Feb 15 '23 at 19:56

0 Answers0