Reactjs 在运行时加载 SCSS答案

【问题标题】：Reactjs Load SCSS at runtimeReactjs 在运行时加载 SCSS
【发布时间】：2018-07-24 06:52:44
【问题描述】：

我有两个 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 文件的解决方案的最佳方法是什么？蒂亚！

【问题讨论】：

根据我对导入的了解，无论您在何处声明它们，它们都会被提升到上下文的最顶端，因此我相信 switch 实际上会始终导入两者。
如果您要动态更改主题，我可能会建议使用 css 变量而不是 scss 变量来控制主题，因为 css 变量的性质可以很容易地以编程方式更改
@ShanonJackson 感谢您对 css 变量的建议，我认为这将是最好的方法。 “能够以编程方式更改 CSS 变量的性质”是什么意思？

标签： javascript reactjs sass

【解决方案1】：

正如@Shanon Jackson 所说，这两个文件都将被导入。

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

【讨论】：