Reactjs在运行时加载SCSS

Posted 2021-05-04

我有两个scss文件，其中包含我站点中不同主题的变量。我希望能够通过提供这样的url参数来更改主题：

let _url = new URL(window.location.href);
let _theme = _url.searchParams.get("theme");

switch (_theme) {
  case 'light': import('./styles/config-light.scss'); break;
  default: import('./styles/config-default.scss');
}

当我在开发中运行站点时，但在构建代码之前将站点推送到生产站点之前，这非常有效。上面的switch语句的问题是文件不包含在构建中。

scss配置文件包含如下变量：

$section-background: #373838;
$section-border: #212121;
$toolbar-border: #212121;
$output-background: #313131;

每个配置文件对于不同的主题都有不同的值，这允许我不复制css代码，只复制值。

实现这种允许我在运行时加载和更改不同scss文件的解决方案的最佳方法是什么？ TIA！

答案

正如@Shanon Jackson提到的那样，两个文件都将被导入。

我建议查看Styled components，它提供可以在运行时控制的主题。