Conditionally applying css style in react spa app - html

Question

I have a project where I am trying to apply different CSS styles for different layouts (which I am detecting by the URL, basically we have two different domain names). In the webpack.config file, I have excluded the style sheet used for the 2nd layout as it was loading all the CSS and putting it all in a single file during the build (which overrides the body color set for layout 1 with layout 2). But after excluding that particular CSS file it was not adding the style sheet back when viewing the 2nd website. Its a react app, and I am using an if condition to apply the style:
index.js file:
if (window.location.hostname.includes("website2")) {
require("./assets/css/style1.css");
require("./assets/css/style2.css");
} else {
require("./assets/css/style1.css");
}
webpack.config
module: {
test: /\.css$/,
exclude: /\style2.css$/,
....
}
I am new to webpack, so I am not sure if I should exclude the CSS file in this manner.

Answer 1

Webpack is a development / build tools. It only compiles source files. So your code won't work in runtime.
You should set a root css class as namespace/theme in each css file, then just change class name in body tag.
// note: scss styles
.style1 {
// style theme 1
}
.style2 {
// style theme 2
}
if (window.location.hostname.includes("website2")) {
body.classList.add("style1");
body.classList.add("style2");
}
else{
body.classList.add("style1");
}