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

Question

I'm using bootstrap-vue and would like to be able to override the theme colors dynamically at runtime (after compiling the scss). To do this I'm following this guide: https://bootstrap-vue.org/docs/reference/theming to set the bootstrap theme colors to a css variable:

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

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

However, when I compile the scss I get the following error:

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`

Is it possible to inject css variables like I want? If so how?

Answer 1

It looks like I've run into a known limitation to bootstrap's scss. This blog outlines a workaround by overriding bootstraps functions: Changing Bootstrap Theme at Runtime with CSS Variables

However it reportedly doesn't work with IE 11.