Import bootstrap5 scss resulting in error

[ChaerilM]

Welcome to the Selectize bug tracker. Thank you for taking the time to make Selectize a better library!

Please keep in mind this repository has an important issue backlog and that maintainers have limited time to fix issues, triage, and understand them.

If you've never done so, please read the guide to reporting issues in the Wiki to help us better understand your issue.

Place an x in the checklist steps ([ ] becomes [x]) to demonstrate you have done/verified all the steps you needed to do.

Thank you for reading this! You can now erase everything up to the following dashes, and then complete what's after.

ISSUES THAT EITHER:

• IGNORE THE ISSUE GUIDELINES
• ERASE THE FOLLOWING TEMPLATE
• DON'T FOLLOW THE PROPER NUMBERED FORMAT FOR STEPS TO REPRODUCE

COULD BE CLOSED.

---

I did:

• [x] Search for if my issue has already been submitted
• [x] Make sure I'm reporting something precise that needs to be fixed
• [x] Give my issue a descriptive and concise title
• [x] Create a minimal working example on JsFiddle or Codepen (or gave a link to a demo on the Selectize docs)
• [x] Indicate precise steps to reproduce in numbers and the result, like below

I tried making a simple import in my scss,

@import '~@selectize/selectize/dist/scss/selectize.bootstrap5.scss';

when i compile it i got error

SassError: Can't find stylesheet to import.
  ╷
1 │ @import "lib/bootstrap5/functions";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^

in which it should use ..\lib instead of lib, or better just go for ~bootstrap/sass/... and get the file from there.

Steps to reproduce:

1. import bs5 css
2. run dev

Expected result: compiled Actual result: error

[kkozlik]

I am facing the same issue with importing bootstrap4 scss

[ChaerilM]

after looking at #1614 seems need some custom bootstrap require in package.json, which i will not do. in the end, i copy the scss and make my own copy

[kkozlik]

My current workaround is patching the scss file with:

--- node_modules/@selectize/selectize/dist/scss/selectize.bootstrap4.orig.scss  2023-06-13 13:57:41.486247383 +0200
+++ node_modules/@selectize/selectize/dist/scss/selectize.bootstrap4.scss   2023-06-13 13:58:23.495827546 +0200
@@ -1,6 +1,6 @@
-@import "lib/bootstrap4/functions";
-@import "lib/bootstrap4/variables";
-@import "lib/bootstrap4/mixins";
+@import "../lib/bootstrap4/functions";
+@import "../lib/bootstrap4/variables";
+@import "../lib/bootstrap4/mixins";

 $enable-shadows: true !default;
 $select-font-family: inherit !default;

[asuri0n]

@kkozlik workaround is working but not ideal solution

@risadams

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days

[kkozlik]

bump

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days

[kkozlik]

bump

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days

[kkozlik]

the issue still exists

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days

[kkozlik]

bump