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

标签 javascript css angular typescript sass

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

这看起来有点棘手,因为编译 SCSS 以生成 CSS 是首先完成的。只有在该应用程序启动并从数据库中提取公司信息之后。

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

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

非常感谢专家的建议。

最佳答案

我认为这里最好的方法是使用 CSS Variables .

对于 variables1.scssvariables2.scss 您知道它们的结构以及它们包含哪些属性,基于此您可以使用 CSS 变量创建相同的属性 然后映射到您的应用程序到一个公共(public)变量:

例如

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

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

关于javascript - 是否可以在 Styles.scss 中动态导入 Variables.scss 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56204050/

相关文章:

jquery - Typescript - 展开和折叠引导 Accordion

javascript - 如何根据javascript中的打开输入来验证文本框

javascript - 如何替换 css ('background-image' )

javascript - 使用 JavaScript 将鼠标悬停在文本上时更改图像,将鼠标悬停在图像上时更改文本

javascript - 如何让 Angular 识别绑定(bind)中的 HTML?

Angular JWT Token 添加到 lazyUpdate 而不是 HttpHeaders 中的 header

javascript - 使用 XHR 请求加载图像

javascript - 在自定义元素内附加自定义元素会导致隐藏元素

javascript - React 未在工作代码中定义

css - 修改css文件时VS2010 pdb锁错误