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

在React Spa应用程序中有条件地应用CSS样式

1 个答案: