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

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?

binarylegit · Accepted Answer · 2020-11-20 15:47:41Z

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.

answered Nov 20, 2020 at 15:47

binarylegit

3791 gold badge4 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related