在 Angular 7 中设置 sass 变量值

Question

过去几周我一直在使用 Angular，现在我需要动态设置公共站点的样式。站点管理员在数据库中设置了各种颜色代码以及来自管理员的徽标图像。这些将在公共站点打开时反映出来。

由于我来自 asp.net 背景，以前我会做的是加载母版页，从数据库中获取值并将它们写入 .less 文件，然后让 java-script 库处理它。那里很简单。

但就我目前的情况而言，我正在使用 sass，但我无法找到将变量写入 .scss 文件的方法。

我刚刚从 这里 学到了一个新东西 APP_INITIALIZER，但最终这篇文章没有展示如何在 .scss 文件中写入。

我实际上是在用我的 asp.net 知识来思考这个问题，但可能是我错了，或者还有另一种实现方式。

我想要一个简单的解决方案，我们在 asp.net 中所做的我想以同样的方式实现这一目标。

1. 第一次加载应用程序时，通过 api 从数据库中获取变量值。

2. 在 SASS 变量文件中写入值。

3. 之后 SASS 会处理这个问题，我们会得到预期的结果。

请给出一些建议或例子，首先。

谢谢。

原文由 kuntal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

虽然 @Cold Cerberus 提出了一个很好的方法并且在前端维护样式相关的东西是正确的，但我建议了一些方法。

正如你所说你想要各种颜色组合，你可以使用 SASS 的条件 CSS。

 body[theme="theme1"] {
   // theme 1 css
}

body[them="theme2"] {
    // theme 2 css
}

您可以将 sass 主题地图 与条件 CSS 一起使用。

只需更新您的属性，主题就会自动应用。

     themeChange() {
    const dom = document.querySelector('body');
    dom.theme = theme1;    // change theme here
    }

如果您对某些应该从后端更新的元素样式（如颜色代码）非常挑剔，您可以将 ng-style 与主题方法一起使用。

 <some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

您必须使用以上的智能组合才能满足您的要求。

原文由 Rajat Gupta 发布，翻译遵循 CC BY-SA 4.0 许可协议