Dynamically import SCSS based on cookie
Unanswered
Norwegian Forest Cat posted this in #help-forum
Norwegian Forest CatOP
Hello,
I'm trying to make web application, where multiple tenants can have access to it. I'd like to have different SCSS theme for each tenant. I'm using KendoReact with kendo-theme-material. I've come up with code like this (see picture).
It kinda works, but I must have RootLayout as 'use client' component and when I first visit the site, it loads everything without styles and after few seconds it updates the styles. Is there any way to implement it on server side and return already imported styles?
tenantA.scss file:
$kendo-color-primary: yellow;
@import '@progress/kendo-theme-material/dist/all.scss';
tenantB.scss file:
$kendo-color-primary: green;
@import '@progress/kendo-theme-material/dist/all.scss';
global.scss file:
@import '@progress/kendo-theme-material/dist/all.scss';
I'm trying to make web application, where multiple tenants can have access to it. I'd like to have different SCSS theme for each tenant. I'm using KendoReact with kendo-theme-material. I've come up with code like this (see picture).
It kinda works, but I must have RootLayout as 'use client' component and when I first visit the site, it loads everything without styles and after few seconds it updates the styles. Is there any way to implement it on server side and return already imported styles?
tenantA.scss file:
$kendo-color-primary: yellow;
@import '@progress/kendo-theme-material/dist/all.scss';
tenantB.scss file:
$kendo-color-primary: green;
@import '@progress/kendo-theme-material/dist/all.scss';
global.scss file:
@import '@progress/kendo-theme-material/dist/all.scss';