Bootstrap 5变量导入顺序覆盖失效问题咨询

各位好，我最近在项目里配置Bootstrap 5的自定义变量覆盖时，遇到了一个百思不得其解的问题，想过来请教下大家。

先给大家看我app.scss里的导入顺序：

@import '~/node_modules/bootstrap/scss/functions';
@import '~/node_modules/bootstrap/scss/variables';
@import '~/node_modules/bootstrap/scss/mixins.scss';

@import 'variables'; // 这是我的自定义变量覆盖文件

@import '~/node_modules/bootstrap/scss/bootstrap';

按照Bootstrap官方文档的说明，这个导入顺序应该是正确的：先引入Bootstrap的核心函数、默认变量和混合宏，接着引入自己的自定义覆盖变量，最后引入完整的Bootstrap包，这样自定义变量就能覆盖默认值了。

我的variables自定义文件内容如下：

$font-size-base: 0.8rem;
$font-weight-medium: 500;
$font-weight-semi-bold: 600;

$h1-font-size: $font-size-base * 2.6;
$h4-font-size: $font-size-base * 1.2;
$h5-font-size: $font-size-base * 1.1;

但让我困惑的点来了：我明明覆盖了$font-size-base的值为0.8rem，可Bootstrap里那些依赖这个变量的默认样式，好像完全没读取到这个新值——还是用它默认的1rem来计算的。我要是想让Bootstrap所有依赖$font-size-base的默认变量都用上我的新值，似乎得额外导入某个文件才行，这和我理解的文档内容完全不符啊。

有没有大佬能帮我分析下，这到底是哪里出了问题？

备注：内容来源于stack exchange，提问作者supersize