Unable to use modified bootstrap $primary variable

[imtiazShakil]

In my styles.scss, I import _variables.scss to modify boostrap default $blue variable which changes bootstrap's $primary colour.

but this change is not picked up by your layout.scss because you are importing bootstrap variables again.

// layout.scss
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

Because of this mouse hovered item doesn't display the right colour:

    // mouse hovered item
    .select2-results__option--highlighted,
    .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
        background-color: $primary;
        color: $light;
    }

[ttskch]

@imtiazShakil Sorry for my late response. Why don't you just add $primary: $blue; in your styles.scss ?

[imtiazShakil]

for my project, I required to change the bootstrap default $blue variable which automatically updates $primary variable and all others which depend on $blue variable.

but the issue is, my modification doesn't work when I import your scss.

[fabiocaccamo]

Thank you for this theme.

I have exactly the same problem, I think that you should use colors from bootstrap variables, otherwise when using sass this select ignores theme colors customizations.

[rodrigo-arias]

Probably related to #51

[bbugh]

We have a number of variables (input padding for example) that the layout import of re-importing bootstrap is clobbering. I don't think there's a way that you can re-import the variables without breaking a lot of stuff. I think the installation instructions will require that bootstrap already be imported before importing the library, which I think is a reasonable ask.

For now, we've just copied the scss into our own source, but that's not ideal.

[fabiocaccamo]

I attach you here my solution, hope it will help to solve this. _select2-bootstrap4-fix.scss.zip

[tagliala]

I think that this issue has been fixed via e946eeda681c5c116bf6f21a7caf4dcee8d18721, because _*.scss files don't import from bootstrap anymore.

Bootstrap variables are only used to build the default distributable .css files