Error with BS 5.3.0-aplha1

[LocalHeroPro]

Steps to reproduce:

em@4accc7f93e9b:/var/www/html$ npx mix                           

✖ Mix
  Compiled with some errors in 5.68s

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color2: var(--bs-border-color) is not a color.
    ╷
212 │   @return mix(black, $color, $weight);
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/bootstrap/scss/_functions.scss 212:11                shade-color()
  node_modules/select2-bootstrap-5-theme/src/_variables.scss 78:84  @import
  node_modules/select2-bootstrap-5-theme/src/_include-all.scss 1:9  @import
  resources/sass/app.scss 25:9                                      root stylesheet
    at processResult (/var/www/html/node_modules/webpack/lib/NormalModule.js:758:19)
    at /var/www/html/node_modules/webpack/lib/NormalModule.js:860:5
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/var/www/html/node_modules/sass-loader/dist/index.js:69:5)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

BS: 5.3.0-aplha1: https://getbootstrap.com/docs/5.3/migration/
select2: 4.1.0-rc.0
select2-bootstrap-5-theme: 1.3.0

[LocalHeroPro]

"Quick fix"
Change in node_modules/select2-bootstrap-5-theme/src/_variables.scss from

$s2bs5-clear-icon:               str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color($s2bs5-border-color, 50%)}) !default;

to:

$s2bs5-clear-icon:               str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color(red, 50%)}) !default;

[larseggert]

@apalfrey any chance this could be fixed in a release?

[LocalHeroPro]

Same issue with:
bootstrap: 5.3.0-alpha3
select2: 4.1.0-rc.0
bootstrap-5-theme: 1.3.0

[dariocarbone]

Same here with 5.3.0 release, could you please publish a new release with the minor fix suggested by @LocalHeroPro (it works like a charm) ?

[madman-81]

I just ran into this issue myself. Instead of editing the package files, I set the variable myself before including the package:

$s2bs5-border-color: red;
@import '~select2-bootstrap-5-theme';

[f1mishutka]

Replacing original color with red one is not a good solution.
Tracing $s2bs5-border-color assignments would get this chain:
$s2bs5-border-color = $form-select-border-color = $input-border-color = $border-color

So correct quick fix is to add this line before importing select2-bootstrap-5-theme:

$s2bs5-border-color: $border-color;

[BSarmady]

With bootstrap 5.3.1 and select2 4.1.0-rc.0 this is completely broken

$('#edtText').select2({
    theme: "bootstrap-5",
    width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
    placeholder: $(this).data('placeholder'),
});

<div class="col-2">
    <input type="text" class="form-control" value="text" />
    <div class="debug-border"></div>
    <select type="text" class="form-control debug-border" id="edtText"></select>
    <div class="debug-border"></div>
</div>

(debug-border) is just a dashed pink border to show boundaries of the control and code is from sample in Single select from document

attempted fixing css with replacing background-color:white with background-color:var(--bs-secondary-bg); and it looks better but the width is still broken and select is hidden too

[krystofbe]

this fork is compatible with boostrap 5.3.1: https://github.com/g10f/select2-bootstrap-5-theme.git

Edit: By working I mean that you need to compile the scss from the fork.

would love to see this merged into the main repo

[guillaumecardon]

Always broken in Bootstrap 5.3.2

[Jir4]

You can just patch it like this :

$s2bs5-border-color: $border-color;
@import "select2-bootstrap-5-theme/src/include-all";

[marc-gist]

this fork is compatible with boostrap 5.3.1: https://github.com/g10f/select2-bootstrap-5-theme.git

Edit: By working I mean that you need to compile the scss from the fork.

would love to see this merged into the main repo

The clear button shows, but doesn't really work in this version...any other options? I don't know how to compile CSS, so a completed css file would be awesome!

[akbarharyadi]

You can just patch it like this :

$s2bs5-border-color: $border-color;
@import "select2-bootstrap-5-theme/src/include-all";

this fixed for me,
select2-bootstrap-5-theme version "1.3.0"