时间戳

首页 > 解决方案 > 在 react spa 应用程序中有条件地应用 css 样式

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

问题描述

我有一个项目，我试图为不同的布局应用不同的 CSS 样式（我通过 URL 检测到，基本上我们有两个不同的域名）。在该webpack.config文件中，我排除了用于第二个布局的样式表，因为它正在加载所有 CSS 并将其全部放在一个文件中（这会覆盖布局 1 和布局 2 的主体颜色集）。但是在排除了那个特定的 CSS 文件之后，它在查看第二个网站时并没有添加样式表。它是一个反应应用程序，我正在使用 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 文件。

标签： htmlcssreactjswebpack

解决方案

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

推荐阅读