我正在开发一个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值，以便使用它。
为什么会这样？