How can I import Bootstrap components but with a prefix?

[saadeghi]

There are many styles used by uBeac components that are based on Bootstrap class name and these class names don't exist in daisyUI or Tailwind CSS.
There are multiple ways I can bring them to the new style file:

• I created a Tailwind CSS+PostCSS setup. I can manually rewrite all those class names in Tailwind CSS @apply and then import+extend them inside the Sass file to make them work with our $prefix. this would take a lot of time of course.
• I can simply import the missing utilities and components from Tabler / Bootstrap so they will be available for our new daisyui.css file.
• I can import the missing styles from scss/tabler to scss/daisyui but I wouldn't recommend making this kind of flat dependency.
• we can somehow re-structure the styles inside scss/tabler to make some of them available to scss/daisyui as well. Something like this:

scss
|_ shared-styles
|  |_ components like off-canvas that don't exist in all of the style systems.
|  |_ utility classes like breakpoints
|_ tabler
|  |_ only components that have equivalent in daisyUI or any future additional style systems
|_ daisyui
   |_ only components that have equivalent in Tabler or any future additional style systems

I think the best option here is to import the missing styles from Bootstrap because Svelte components are already based on Bootstrap class names and it wouldn't make sense to rewrite them at this point.

I have an issue while importing a component from bootstrap.
It imports but without the prefix. Can you help me why the prefix is not getting applied? @pournasserian
Here's the code: https://github.com/ubeac/svelte/blob/71a448097c750bcc47942dc135a14d67d841926e/src/scss/daisyui/index.scss

It imports offcanvas class but it's not adding u- prefix.