asp.net - Bootstrap 4 - input-btn-padding y 和 x 变量覆盖不自定义 bootstrap.css 文件

Question

ASP.NET 项目，使用 NuGet 包 bootstrap.sass，版本 4.3.1。使用带有扩展 Web 编译器的 Visual Studio 2017 来编译 Sass。

在 custom.scss 文件中，我覆盖了许多正常工作的引导变量。

当试图覆盖变量 $input-btn-padding-y 和 $input-btn-padding-x 时，它们不会影响已编译 bootstrap.css 文件中 form-control 或 btn 类的填充值。其他自定义项已正确应用。

根据 bootstrap 4 附带的 _variables.scss 文件，自定义 input-btn-padding 变量似乎应该会影响两者，因为它们的值是从基本变量派生的。

当我自定义 $input-padding-y、$input-padding-x 变量时，它会正确自定义并更新表单控件类。$btn-padding-y 和 $btn-padding-x 相同。

自定义基本级别的 $input-btn-padding-y/$input-btn-padding-x 变量有什么问题吗？或者我需要自定义更高级别的值吗？

我尝试使用 Web Compiler 扩展和一个自定义的、基本的 gulpfile 来编译 Sass，并获得了相同的结果。我还开始了一个新项目，更新到相同版本的 bootstrap 4 并最终在同一个地方。

_variables.scss 看起来应该可以覆盖基本变量：

$input-btn-padding-y:         .375rem !default;
$input-btn-padding-x:         .75rem !default;
...
$btn-padding-y:               $input-btn-padding-y !default;
$btn-padding-x:               $input-btn-padding-x !default;
...
$input-padding-y:                       $input-btn-padding-y !default;
$input-padding-x:                       $input-btn-padding-x !default;

相关的 custom.scss 覆盖：

$input-btn-padding-y: 0.75rem;
$input-btn-padding-x: 1rem;

bootstrap.css 中表单控件的填充：

.formcontrol {
    ...
    padding: 0.375rem 0.75rem;
    ...
}

btn 也一样：

.btn {
    ...
    padding: 0.375rem 0.75rem;
    ...
}

标签： asp.nettwitter-bootstrapsassbootstrap-4visual-studio-2017

Answer 1

派对有点晚了，但这是覆盖 bootstrap sass 的正确方法。

// Variables
$primary:       #8a2387;

$theme-colors: (
  "primary": $primary,
);

$input-btn-padding-x: 1rem;

// Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

// My Styles goes here


// Bootstrap
@import "bootstrap/bootstrap";