<b-button variant="foo"> uses original bootstrap color, instead of variable override.

Describe the bug

<b-button> variant does not inherit colors from the $theme-colors bootstrap scss variables like it is supposed to.

Steps to reproduce the bug

1. Create a fresh project
2. Create theme.scss and override $theme-colors per documentation e.g.

$theme-colors: (
  primary: #2D3047;
);

1. In the template html, create <b-button variant="primary">Foo</b-button>
2. Observe that the color of the button is not #2D3047 but instead #007BFF

Expected behavior

When creating a <b-button> with a variant and $theme-colors overridden, the variant of <b-button> should reflect the new $theme-colors color, not the original bootstrap color.

Versions

Libraries:

• BootstrapVue: 2.12.0
• Bootstrap: 4.4.1
• Vue: 2.6.11

Environment:

• Device: Desktop
• OS: Windows 10 LTSC
• Browser: Firefox
• Version: 79

[Hiws]

I’ve never used @extend, so can’t say for sure. But you can refer to the link if you only need mixins, functions and variables in your SFC’s.

[Hiws]

Are you importing anything into a scoped style tag? <style scoped>.

data-v-xxxxxx is added when using scoped style tags to limit the CSS to that component only.