如何通过SASS更改Bootstrap 4的border-bottom-width？

Question

我正同时接触Laravel和SASS，并借此机会将旧的html模板重写为可重复使用的内容并SASS CSS规则。

在我的HTML模板中，边框如下：

input[type="text"]{
  border-style:solid;
  border-color:red;
  border-width:1px 1px 4px 1px;
}

<input type="text" />

所以我的边框底部为4px，其余部分为1px，具有相同的样式和颜色。我想覆盖Bootstrap 4的$border-width属性，所以我继续将其更改为1px 1px 4px 1px，然后开始工作。没用。

在检查了SASS文件之后，我注意到它们并未按照我的预期使用，而是看起来像这样： border: $border-width solid $border-color

这让我开始思考，可能有几种方法可以解决此问题，到目前为止，我继续做下去的一种方法是：

$border-widths:1px 1px 4px 1px;
input[type="text"].form-control{
  border-width:$border-widths!important;
}

因此，我将保留默认的$border-width变量，而是创建自己的变量，然后选择输入并仅覆盖border-width属性。看起来不对，因为：

1. 这是我的_variables.scss覆盖文件，我有点希望它保持这种状态。
2. 我可以使用CSS替代方法以相同的方式执行此操作，但是这样做会破坏整个目的。
3. 我必须明确使用!important，否则我将无法覆盖Bootstrap 4的规则。

所以，我想一定有另一种方法。但是到底是什么？

Answer 1

我最终只是简单地保留了!important来覆盖它，并给自己做了另一个scss文件，并在其中编写了规则：

_variables.scss

$border-widths:             1px 1px 4px 1px;

_custom.scss

.border-thick-bottom{ border-width:$border-widths!important; border-style:solid; }