Configuring multiple user interfaces

I ran into an architectural issue while developing a UI customization solution for a multi-tenant application, the architecture of the application is as follows

This is a single page application.

We have two servers Server A and Server B

Server A is responsible for serving HTML and other static assets like css, images, etc.

Server B is the backend api server.

The current Front Front build process, running on the front-end server, on every git commit, we run the build process that compiles scss to css files.

The bottleneck here is that we need to manually add a custom variables.scss file for each new tenant in order to be able to generate a specific tenant css.

We want to automate this process so that we can load a new variables.scss file and include it in the build process to generate tenant-specific css.

So basically looking for ideas on how to do this effectively.

Let me know if more information is required.

UPDATE In our index.html, we dynamically load a specific renter CSS file based on the subdomain present in the url.

We are using a grunt based build task to compile sass, here's how it works.

we have a sass folder which contains main.scss in the root folder and a tenants folder inside the sass folder which additionally contains a subfolder for each tenant, each subfolder contains a .scss variable. We wrote a grunt task that performs the task of dynamically generating a css file for each tenant (by merging main.scss and variables.scss) in the dist folder.