'How can I set bootstrap-vue theme colors to css variables?

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?

cssvue.jssassbootstrap-vue


Solution 1:[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.

Solution 2:[2]

You should set a default value.

$info: var(--info, #cccccc);


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

should to the trick

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 binarylegit
Solution 2

Related Questions