Importowanie klas bootstrap do module.css w Next.js

Używam modułu Sass w projekcie opartym Next.js. Mam plik Component.module.scss, a w nim klasę:

.foo {
    &:hover {
        @extend .shadow-sm;
    }
}

Klasa shadow-sm pochodzi z bootstrap. Jeśli nic nie zaimportuję to otrzymam błąd "SassError: The target selector was not found.". Pomimo iż mam zaimportowany bootstrap w głównym pliku index.scss "@import "~bootstrap/scss/bootstrap";" i sam bootstrap "działa" to ten selektor nie jest znany w tym module. Zatem muszę do każdego modułu (każdego pliku module.scss) ręcznie zaimportować bootstrap. Jednak jeśli zaimportuję to poprzez "@import "~bootstrap/scss/bootstrap"; to otrzymam inny błąd: "Selector ":root" is not pure". Rozwiązanie jakie na razie znalazłem to zaimportowanie podmodułów bootstrap. Mój plik Component.module.scss obecnie wygląda tak:

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

.foo {
    &:hover {
        @extend .shadow-sm;
    }
}

Powyższe rozwiązanie działa, nie ma żadnych błędów, a po najechaniu myszą na element z klasą .foo pojawia się cień. Jest to moim zdaniem słabe rozwiązanie, bo nie mam zamiaru się za każdym razem bawić w importowanie. Jak to rozwiązać? Idealnie byłoby, gdyby bootstrap był jakoś globalnie zaimportowany i był dostępny we wszystkich modułach, ewentualnie jak tego się nie da to chociaż chciałbym zastąpić te 4 linijki @import jedną "@import "~bootstrap/scss/bootstrap";".