在 react spa 应用程序中有条件地应用 css 样式答案

【问题标题】：Conditionally applying css style in react spa app在 react spa 应用程序中有条件地应用 css 样式
【发布时间】：2019-01-07 13:22:15
【问题描述】：

我有一个项目，我试图为不同的布局应用不同的 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 文件。

【问题讨论】：

webpack 是在部署之前还是之后运行？这是静态发生的。因此，如果您在部署到两个域之前运行 webpack 构建，则此条件将无效。对于主机名，我希望您检查一下：Accessing the URL hostname from React JS.

标签： html css reactjs webpack

【解决方案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");
}

【讨论】：