javascript - 是否可以在 Styles.scss 中动态导入 Variables.scss 文件？

Question

两个不同的客户端需要自己的主题，它们各自的主题颜色保存在 Variables1.scss 和 Variables2.scss 文件中。启动时，应用程序进行 http 调用并提取公司名称等信息。现在，根据公司名称，我想决定是导入 Variables1.scss 还是 Variables2.scss。

这似乎有点棘手，因为首先要编译 SCSS 以生成 CSS。并且只有在该应用程序启动并从数据库中提取公司信息之后。

通过导入各自的 Variables.scss 文件为每个客户构建应用程序可能是一个简单的解决方案，但如果公司数量增加，这种方式将不可行。

我浏览了很多与我的相关的帖子，但他们要么提出了一个创建大量代码重复的解决方案，要么引导我在整个应用程序中更改类的名称。

专家的建议将不胜感激。

标签： javascriptcssangulartypescriptsass

Answer 1

我相信这里最好的方法是使用CSS 变量。

因为variables1.scss并且variables2.scss您知道它们的结构以及它们包含哪些属性，基于此您可以使用创建相同的属性CSS Variables，然后将其映射到您的应用程序到一个公共变量：

例如

  $background-default: var(--background-default)

当您发出Http请求时，会根据响应动态加载变量。