html - 在 React spa 应用程序中有条件地应用 css 样式

Question

我有一个元素，我试图为不同的布局应用不同的 CSS 样式(我通过 URL 检测到，基本上我们有两个不同的域名)。在 webpack.config 文件中，我已经排除了用于第二个布局的样式表，因为它加载了所有 CSS 并在构建期间将它们全部放在一个文件中(它覆盖了主体颜色集对于布局 1 和布局 2)。但是在排除那个特定的 CSS 文件之后，它在查看第二个网站时并没有添加样式表。它是一个 React 应用程序，我正在使用 if 条件来应用样式:

index.js 文件:

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$/,
  ....
} 

我是 webpack 的新手，所以我不确定是否应该以这种方式排除 CSS 文件。

Answer 1

Webpack 是一个开发/构建工具。它只编译源文件。所以你的代码不会在运行时工作。

您应该在每个 css 文件中设置一个根 css 类作为命名空间/主题，然后只需在 body 标签中更改类名。

// 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");
}