'Will importing the same SCSS file in multiple Vue components import the SCSS multiple times?

If I have a few Vue single-file child components, lets say 3 for now, and I'm wanting to import some SCSS such as this:

<style lang="scss" scoped>
    @import 'bootstrap/scss/_functions.scss';
    @import 'bootstrap/scss/_variables.scss';
    @import 'bootstrap/scss/_mixins.scss';

    @include media-breakpoint-up(xl) {
        .some-class { color: $primary; }
    }
</style>

When finished will the compiled CSS contain 3 copies of each of the imported SCSS files and create a lot of bloat?

For context, I'm using Laravel 8/Vue 2 and a typical installation.

Bonus: Is there a way to not have to import these files into each component where I'm wanting to take advantage of mixins such as media-breakpoint-up?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Will importing the same SCSS file in multiple Vue components import the SCSS multiple times?

Sources

Related Questions