Jak uzyskać dostęp do zmiennych Bootstrap w module Sass?

Mam projekt Next.js + React, w którym używane są moduły Sass. Mam komponent TabBar, do którego importuję style z TabBar.module.scss. Chcę w tym pliku scss użyć zmiennych z Bootstrapa, więc importuję go w następujący sposób:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/utilities/api";

Niestety powoduje to, że w wynikowym kodzie mamy duplikat klas Bootstrap. Tzn. dla każdego *.module.scss gdzie importuję Bootstrap w taki sposób, tworzone są tego typu rekordy:

"align-baseline": "TabBar_align-baseline__VbH4p",
"align-top": "TabBar_align-top__tyRzJ",
"align-middle": "TabBar_align-middle___yIz6",
"align-bottom": "TabBar_align-bottom__6vNdU",
"align-text-bottom": "TabBar_align-text-bottom__2Q_nT",
"align-text-top": "TabBar_align-text-top__q_LA_",
"float-start": "TabBar_float-start__1yLhC",
"float-end": "TabBar_float-end__t9jDw",
"float-none": "TabBar_float-none__4Bi0n",
"opacity-0": "TabBar_opacity-0__FYMbv",
"opacity-25": "TabBar_opacity-25__3o142",
"opacity-50": "TabBar_opacity-50__5IsCz",
"opacity-75": "TabBar_opacity-75__3NbCV",
"opacity-100": "TabBar_opacity-100__rkv7_",
"overflow-auto": "TabBar_overflow-auto__DVP58",
itd.

Czyli dla każdej klasy zdefiniowanej w Bootstrap definiowany jest odpowiednik z prefixem składającym się z nazwy komponentu. Gdy użytkownik wchodzi na stronę, która składa się np, z 20 komponentów ze stylami *.module.scss a w tych stylach importowany jest Bootstrap, to do użytkownika po sieci zostanie przesłane 20 plików z danymi z powyższego przykładu. Te wszystkie pliki powodują, że cała strona jest niepotrzebnie cięższa o kilkaset KB.

Jak rozwiązać ten problem? Wiem, że @import jest przestarzałe i powinno się zmigrować na @use oraz @forward, jednak nie mogę tego zrobić z Bootstrapem 5, bo migracja jest dopiero w planie na wersję 6. Czy @use oraz @forward rozwiązałyby ten problem? A może problem polega na tym, że te klasy są importowane do modułu i w związku z tym, że to jest moduł to są one prefiksowane, w przeciwnym razie byłyby globalne, a nam nie o to chodzi w modułach.

W jaki sposób mogę używać zmiennych Bootstrap w *.module.scss, tak by nie powodowało to "duplikowania" klas Bootstrap? Niestety nie znalazłem rozwiązania w internecie.

amddma napisał(a):

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/utilities/api";

Sprawdzałeś, czy w plikach, które importujesz nie ma żadnych styli CSS? Bo to wygląda tak jakby, któryś plik oprócz importowania scss'a (@function/@mixin/$variable) dodawał też normalny kod CSS.

Masz rację, w @mixin były importowane różne inne pliki, nie zaglądałem już tam, ale ograniczyłem importy do @mixin/breakpoints oraz usunąłem dwa ostatnie z utilities. Problem wygląda na rozwiązany, teraz First load JS to ok. o 50% mniej danych do pobrania przez przeglądarkę. Tak teraz wygląda sekcja import:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";