我最近几周一直在使用Angular，现在我有一个要求需要动态地样式化公共网站。网站管理员在数据库中设置了各种颜色代码以及Logo图像。当公共网站打开时，这些将被反映出来。
由于我来自asp.net背景，以前我会在母版页面加载时，从数据库中取值并将其写入.less文件，然后让JavaScript库处理它。那很简单。
但对于我的当前情况，我正在使用Sass，而我无法找到一种将变量写入.scss文件的方法。
我刚学了一个新东西——应用程序初始化器，但最终这篇文章没有展示如何在.scss文件中进行写入。
我实际上是根据我的asp.net知识在思考，但可能我错了，或者还有另一种实现方式。
我想要一个简单的解决方案，就像我们在asp.net中所做的那样，我希望以同样的方式实现这个目标。
在应用程序首次加载时通过API从数据库中获取变量值。
将值写入Sass变量文件中。
之后Sass将负责处理这些值，我们将得到预期的结果。
请您给出一些建议或示例，让我可以开始尝试。
谢谢。
我上面的回答可能存在一些错误的暗示，但是我会保留它，并分享我与这个主题相关的经历。
我曾经在一个Web应用程序上工作，用户可以通过设置自定义他们的主题。同样，CSS规则不存储在DB中，而是存储在要设置为sass变量的颜色值中。有一个特殊的脚本，用于编译CSS脚本（按需返回，这使得它有点慢，但是闪屏可以节省你的时间，没有AOT编译），以及定制值，我不知道如何完成。翻译也是一样，最近我也参与了一个项目，其中翻译来自数据库，但是每次发布/部署都有一个脚本运行，生成并更新assets/i18n文件夹中的.json文件。
正如其他答案所解释的那样，无法在客户端设置SASS变量并进行处理，因为SASS在构建时转换为纯CSS，当应用程序运行或在APP_INITIALIZER浏览器中时，仅能处理CSS。
我看到实现您想要的有两个选项。
通常，您会有一些应用程序的基本css，然后根据管理员设置需要加载附加的css。从css的角度来考虑，所有附加的css中的css特异性都应该大于基本css，否则它将无法覆盖基本css。这需要基本的css知识，因此我不会详细说明。
在服务器请求上生成额外的css。在应用程序从服务器URL启动时加载它。当管理员更改任何设置时，通过js重新加载它。
/additional.css（或类似于/api/theme/custom-css）定义后端端点，它将从数据库中生成css。例如，您的数据库中有background=red，则端点应返回body {background-color: red;}
index.html的<head>中添加<link id="additionalCss" rel="stylesheet" type="text/css" href="additional.css" />，这样就足以使其起作用。document.getElementById('additionalCss').href = document.getElementById('additionalCss').href;
{
"background": "red"
}
cssCode = 'body {background-color: red}';
let additionalCssStyle = document.getElementById('additionalCss');
if (! additionalCssStyle) {
additionalCssStyle = document.createElement("style");
additionalCssStyle.id = 'additionalCss';
document.head.appendChild(additionalCssStyle);
}
additionalCssStyle.innerText = cssCode;
虽然@Cold Cerberus提出了一个不错的方法，并且在前端维护样式相关的事情上是正确的，但我提出了一些方法。
正如你所说，你想要各种颜色组合，你可以使用SASS的条件CSS。
body[theme="theme1"] {
// theme 1 css
}
body[them="theme2"] {
// theme 2 css
}
themeChange() {
const dom = document.querySelector('body');
dom.theme = theme1; // change theme here
}
<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>
css文件。组件特定的内容将生成为javascript，然后在运行时应用您的样式。// your.component.ts
@Component({
// ... component stuff
styles: ['h1.option1 {color: red;}', 'h1.option2 {color: blue;}'],
template: `
<h1 *ngIf="optionSelection$ | async as option; else noOption"
[class.option1]="option == 1"
[class.option2]="option == 2">
Hey there, I'm styled!
</h1>
<ng-template #noOption>
<h1>No option received</h1>
</ng-template>
`
})
export class YourComponent {
optionSelection$: Observable<number>;
constructor(yourService: YourService){
this.optionSelection$ = yourService.getYourOption().pipe(startWith(null));
}
}
由于Sass是预编译的CSS，我们无法动态更改主题而不生成单独的theme.css文件。这就是JSS发挥作用的地方。 JSS是一种基于JavaScript的样式注入机制，可以将CSS直接注入到正在使用它的文件中。
react-angular-material广泛使用它，我们可以动态传递颜色变量给应用程序的主题。
例如，这个人用angular做了这个。
文档：jss-angular, jss
这种方式不可能实现，但是你可以使用sass变量的值而不是sass变量本身。它可以是任何值。
为什么？因为sass在打包期间编译，在最终阶段，它仍然会生成普通的CSS。
一个使用这种可选样式处理器的框架的例子是Angular。