为什么我不能覆盖 BootstrapVue 中的容器填充变量?

Sov*_*iut 0 themes bootstrap-4 bootstrap-vue

我正在按照VueBootstrap 主题指南为 BootstrapVue 2.0(使用 Bootstrap 4.3)构建一个主题。我有一个theme.scss文件,它在开头有我的覆盖并在最后导入基本样式。我正在尝试覆盖默认的容器水平填充,但它似乎不起作用。

主题.scss

$container-padding-x: 30px !default;

@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';
Run Code Online (Sandbox Code Playgroud)

容器左侧和右侧的填充保持默认值15px

此外,如果我尝试覆盖装订线宽度,它会起作用并且更改甚至会调整容器填充,因为容器填充是装订线宽度的一半。

$grid-gutter-width: 60px !default;
Run Code Online (Sandbox Code Playgroud)

为什么与变量覆盖存在差异?

Tro*_*use 5

$container-padding-x 不是 Bootstrap v4.3.x 中的变量(但在尚未发布的 v5.x 中)

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

网格填充的控制由 控制$grid-gutter-width,适用于行(负边距$grid-gutter-width / 2)和列填充 ( $grid-gutter-width / 2)

https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid-framework.scss

containers 还得到一个 x-padding $grid-gutter-width / 2

https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss