White-labeling React application with SASS and CSS variables

White-labeling is one of the more difficult problems in UI development. And for a reason. The good news is that with CSS variables, this task became much more manageable. And even better, they can also be used with SASS. In this post, you can see my solution for white-label support in a ReactJS application using CSS variables and SASS.

Make a design book

You don’t need to go into huge details and get a professional designer to make it. But you need to put some proper structure. Define your paddings, margins, font sizes, and colors. If every part of your website has different padding, you can’t customize it efficiently. There would be just too many variables.

Project setup

For this example, I am starting with a basic React application, and you can create it by executing:

npx create-react-app whitelabel-example-app

Also, install node-sass for SASS support by running the next command:

npm install node-sass

There was an issue with the latest version of the node-sass package(v5). You can fix this problem by downgrading to version four.

Initial styling