SCSS compiling with !default value even though it is set previously

Question

I'm working on a Vuejs project and using a framework for the styles. I am setting a variable before importing the framework where I know the variable has !default, but the !default value is still what is compiled when I run it.

// My styles.scss file
$vert-nav-width: 12em;
@import "../node_modules/kent-css/kent.scss";

// kent.scss
...
$vert-nav-width: 8em !default;
...

I have no idea why this is happening, isn't this the exact use case of !default?

When I look at the compiled CSS file (using node-sass and sass-loader with webpack) it just adds the styles with changed attributes

.class-using-variable {
    max-width: 12em
}

To the top of the CSS file, but keeps the original definition using the !default value under it so that is what gets used.

Why is that happening?