bootstrap 4 scss的导入顺序以使用变量

Question

我正在使用基本的Webpack设置导入Bootstrap，并想使用其变量来扩展/更新它，但是我遇到了问题。

如果我这样构建我的应用程序：

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/bootstrap';
$primary: #FF0000;
$font-size-lg: $font-size-base * 1.25;

原色是默认的蓝色，大字体的大小不变。.

如果我将其切换为：

$primary: #FF0000;
$font-size-lg: $font-size-base * 1.25;
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/bootstrap';

我得到Undefined variable: "$font-size-base".

如果我删除了$font-size-base中的{{1}}设置，则原色设置如预期

我怎样才能使它们发挥得更好？例如。 Bootstrap的构建可以接受我的字体大小和颜色，同时将其变量用作变量的基础吗？