在Angular中动态更改styles.scss [英] Change styles.scss dynamically in Angular

问题描述

我想根据Angular引导之前已知的变量动态地应用SCSS样式.是否可以通过编程方式更改styles.scss?在main.ts引导之前，我想动态添加如下一行:

I want to apply dynamically SCSS styling according to a variable, known prior to Angular bootstrapping. Is it possible to change styles.scss programmatically? In main.ts before bootstrapping, I want to add dynamically a line like:

@import 'assets/styles/customerA/_themes.scss';
                       or 
@import 'assets/styles/customerB/_themes.scss';

取决于来自服务器的变量值.

depending on a variable's value coming from the server.

如果以上操作不可行，是否有任何方法可以用将在服务器上定义的另一个文件的内容填充styles.scss?我要更改styles.scss，而不要更改任何其他本地" scss文件.

If the above is not feasible, is there any way to populate styles.scss with the content of another file which will be defined on the server? I want to change styles.scss and not any other "local" scss file.

推荐答案

在进行了很多努力之后，我在CSS variables中找到了答案.那正是我想要的！您可以在运行时更改它们，因此可以执行 动态主题 .这是一篇很好的文章，描述了Angular中的步骤:

After having struggled a lot with it, I found the answer in CSS variables. That's exactly what I was looking for! You can change them during runtime and therefore dynamic theming is doable. This is a very good article describing the steps in Angular:

https://medium.com/@amcdnl/theming -angular-with-css-variables-3c78a5b20b24

这篇关于在Angular中动态更改styles.scss的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！