Angular SSR stylesheet is being loaded but not applied

I am creating an angular app using server side rendering and will have multiple clients using it, so I want the page to have different styles or themes. I'm trying to load the themes in the page but they are not being applied.

For the moment I have created 2 theme files (clientA & clientB) and am loading the stylesheet into the page like so

server.get('**', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;
const clientId = req.headers['x-client-id'];
const themePath = `/assets/themes/${clientId}.scss`;

commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
providers: [
{ provide: APP_BASE_HREF, useValue: baseUrl },
{ provide: 'CLIENT_ID', useValue: clientId },
],
})
.then((html) => {
const themeLink = `<link id="theme" rel="stylesheet" href="${themePath}" />`;
html = html.replace('</head>', `${themeLink}</head>`);

res.send(html);
})
.catch((err) => next(err));
});


in my theme file I simply have this

:root {
--background-color: blue;
}

.main {
background-color: blue;
}


When I open the page the stylesheet is loaded but the styles are not applied. I tried using the variable background color and it says it is not defined.

Network image

Continue reading...