即使先前已设置，SCSS也会使用！default值进行编译

Question

我正在开发一个Vuejs项目并使用样式框架。我在导入框架之前设置了一个变量，我知道变量有！default，但是！default值仍然是我运行它时编译的内容。

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

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

我不知道为什么会发生这种情况，这不是！default的确切用例吗？

当我查看已编译的CSS文件（使用带有webpack的node-sass和sass-loader）时，只需添加具有已更改属性的样式

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

在CSS文件的顶部，但保留原始定义使用其下的！default值，以便使用它。

为什么会这样？