从引导程序中删除“！important”答案

【问题标题】：Remove "!important" coming from bootstrap从引导程序中删除“！important”
【发布时间】：2022-07-21 20:15:47
【问题描述】：

我想用我选择的颜色覆盖.text-primary。

所以在我的覆盖文件中，我将其定义为：

@include text-emphasis-variant(".text-primary",$brand-primary, true);

text-emphasis-variant 是 Bootstrap 4 中的一个 mixin，它的定义方式是将 color 属性标记为 !important。所以生成的css文件如下：

.text-primary {
  color: #007bff !important; }

a.text-primary:hover, a.text-primary:focus {
  color: #0056b3 !important; }

.text-primary {
  color: #0078D2 !important; }

a.text-primary:hover, a.text-primary:focus {
  color: #004c86 !important; }

现在，我想在另一个类中使用text-primary 类：

<div class="customRow">
    <span class="text-primary"> Testing </span>
</div>

我还有另一个覆盖，例如：

.customRow>span {
    color: #555
}

这里的问题是它没有采用颜色#555，因为text-primary 中的颜色标记为!important。

【问题讨论】：

标签： html twitter-bootstrap bootstrap-4 scss-mixins

【解决方案1】：

我目前正在开发一个项目，我按照本教程覆盖了 bootstrap 5，希望它也可以帮助你。如果您使用的是 Bootstrap 5 覆盖 $theme-colors 的正确方法是这样做

// First override some or all individual color variables
$primary: #25408f;
$secondary: #8f5325;
$success: #3e8d63;
$info: #13101c;
$warning: #945707;
$danger: #d62518;
$light: #f8f9fa;
$dark: #343a40;

// Then add them to your custom theme-colors map, together with any additional colors you might need
$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  success: $success,
  info: $info,
  warning: $warning,
  danger: $danger,
  light: $light,
  dark: $dark,
  // add any additional color below
);

有关更多信息，请参阅link

【讨论】：

【解决方案2】：

将此添加到您的 SCSS 文件中。

$enable-important-utilities: false;

来源https://getbootstrap.com/docs/5.0/utilities/api/#importance

【讨论】：