基于组件的结构中具有React和SASS的多品牌样式

Question

我正在尝试将现有的多品牌/主题样式应用于React应用程序。 该项目是根据Atomic Design进行结构设计的，因此所有组件均应基于组件样式。例如

Button.scss

.button {
    background: $brand-primary;
}

然后在我的根组件中导入必要的品牌样式：

App.tsx

if (brand === "brand1") {
    require("./styles/brand1.scss");
} else if (brand === "brand2") {
    require("./styles/brand2.scss");
}

styles / brand1.scss

$brand-primary: red;

通常，使用品牌样式的require（）动态导入似乎有效。如果我使用普通的css变量而不是scss变量，它正在使用这种方法（但由于IE11不兼容，我无法使用css变量）。

但是编译器抱怨Button.scss（未定义变量）中$ brand-primary的用法-我完全理解。但是我无法导入包含变量的文件，因为此时我不知道要导入哪个文件（稍后在App.tsx中由运行时决定）。

那么我该如何在我的组件中引用变量$ brand-primary，但是稍后在运行时进行设置？

Answer 1

您可以尝试使用React Lazy和suspense导入您的CSS文件。 https://reactjs.org/docs/code-splitting.html#reactlazy