Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error with BS 5.3.0-aplha1 #75

Open
LocalHeroPro opened this issue Dec 30, 2022 · 12 comments
Open

Error with BS 5.3.0-aplha1 #75

LocalHeroPro opened this issue Dec 30, 2022 · 12 comments

Comments

@LocalHeroPro
Copy link

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
Copy link
Author

"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
Copy link

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

@LocalHeroPro
Copy link
Author

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

@dariocarbone
Copy link

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) ?

dariocarbone added a commit to dariocarbone/select2-bootstrap-5-theme that referenced this issue Jun 1, 2023
Quick fix for bootstrap 5.3.0

See: 
apalfrey#75 (comment)
@madman-81
Copy link

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
Copy link

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
Copy link

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

image

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

image

@krystofbe
Copy link

krystofbe commented Sep 14, 2023

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
Copy link

Always broken in Bootstrap 5.3.2

@Jir4
Copy link

Jir4 commented Nov 29, 2023

You can just patch it like this :

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

@marc-gist
Copy link

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
Copy link

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"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests