Angular：用动态变量覆盖引导变量（从服务加载）答案

【问题标题】：Angular: Override bootstrap variable with dynamic variable (loaded from service)Angular：用动态变量覆盖引导变量（从服务加载）
【发布时间】：2021-06-25 09:27:24
【问题描述】：

我可能陷入了死胡同。我正在尝试用自己的变量覆盖 bootstrap scss $primary 变量，我通过外部 JSON 配置文件中的服务加载到组件中（此文件的内容可能会有所不同）。

我想到的最直接的解决方案是这样的：

ComponentStyles.scss

$primary = {{variableLoadedFromConfigFile}};

以前的解决方案是静态的

$primary = blue;

现在我需要将其更改为动态行为（从文件加载该值的意义上）。

这可能吗？

谢谢。

【问题讨论】：

您是否要覆盖材质类或类似的东西？您需要提供更多信息，您的问题缺少信息。
@Bargros 我编辑了我的问题，希望现在更清楚了。
对不起，我还是没听懂你想说的话，听起来你需要定义自己的味觉，如果是这样，请阅读这个答案create palate theme

标签： angular bootstrap-4

【解决方案1】：

我发现在运行时注入自定义 CSS 文件的方法是在我的组件中使用 <link /> 元素。

上面是一个实现：

HTML

<link rel="stylesheet" [href]='cssUrl'>

cssUrl: SafeResourceUrl;

constructor(private sanitizer: DomSanitizer) {}

ngOnInit() {
  this.cssUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`assets/my.css`);
}

PS：你应该把你想注入的文件放在你的资产中Angular.json。

PS2：注意缓存问题。

问题编辑后

动态更新 CSS 的 Angular 方法是使用 NgStyle 指令。或者在[styles]中使用HTML插值。

您不能在 CSS 文件中使用插值。

您还可以像 a 给您的示例一样创建 CSS 链接并插入自定义 CSS 文件，或者您可以使用没有封装的组件将一些 CSS 注入 HTML 正文。

【讨论】：

恐怕我不够清楚。我不需要加载另一个 CSS，而是从 JSON 加载该变量并以某种方式将其插入样式中。

【解决方案2】：

最后我通过使用 node-sass-json-importer 将值从 json 直接加载到 scss 解决了这个问题，正如 here 所描述的那样。

【讨论】：