如何将bootstrap-vue主题颜色设置为css变量？

Question

我正在使用bootstrap-vue，希望能够在运行时动态覆盖主题颜色(在编译scss之后)。为此，我遵循以下指南：https://bootstrap-vue.org/docs/reference/theming将引导主题颜色设置为css变量：

$theme-colors: (
  "info": var(--info)
);

@import "node_modules/bootstrap/scss/bootstrap";

但是，当我编译scss时，我得到以下错误：

SassError: argument `$color-2` of `mix($color-1, $color-2, $weight: 50%)` must be a color
on line 106 of node_modules/bootstrap/scss/_functions.scss, in function `mix`

有没有可能像我想的那样注入css变量？如果是这样的话，是怎么做的？

Answer 1

看起来我遇到了bootstrap的scss的一个已知限制。此博客概述了通过覆盖引导程序函数来解决问题的方法：Changing Bootstrap Theme at Runtime with CSS Variables

然而，据报道，它不能与IE 11一起工作。