Bootstrap 5 - $spacers order of @imports partials

Question

I have a partials file named _variables.scss so I can add entries to the $spacers Sass map variable. I am importing the _variables.scss file using @import. I am not understanding why you need to put the @import 'variables; before the @import 'boostrap/scss/bootstrap'; @import.

Here is my styles.scss file -- WORKS!

@import 'variables'; 
@import 'bootstrap/scss/bootstrap';
@import 'color-variables';
@import 'font-variables';
@import 'fonts';
@import 'top-bar';
@import 'header';
@import 'hero';
@import 'toolbar';
@import 'footer';
@import 'tables';
@import 'modal';
@import 'cards'; 

It took my awhile to figure out why my _variables partial wasn't working. I originally had the file below the @import 'bootstrap/scss/bootstrap'; call.

Here is my styles.scss file -- DOESN'T WORK!

@import 'bootstrap/scss/bootstrap';
@import 'variables';
@import 'color-variables';
@import 'font-variables';
@import 'fonts';
@import 'top-bar';
@import 'header';
@import 'hero';
@import 'toolbar';
@import 'footer';
@import 'tables';
@import 'modal';
@import 'cards'; 

I moved the @import 'variables'; above @import 'bootstrap/scss/bootstrap'; and then below the @import 'bootstrap/scss/bootstrap';

Having @import 'variables'; above @import 'bootstrap/scss/bootstrap'; worked but I don't understand why it has to be before the @import 'bootstrap/scss/bootstrap'; call.