Bootstrap 4 - Reboot.scss 覆盖 Global.scss答案

【问题标题】：Bootstrap 4 - Reboot.scss overriding Global.scssBootstrap 4 - Reboot.scss 覆盖 Global.scss
【发布时间】：2022-04-17 01:14:53
【问题描述】：

我正在使用Sage Starter Theme，并且我正在添加一些 CSS 来设置 _global.scss 文件中的全局链接样式。 Bootstrap 覆盖了文件 _reboot.scss 中的一些 CSS 属性。

_global.scss

这种样式为我的所有链接添加了悬停效果的基本下划线。

a {
    font-family: $font__lato !important;
    text-decoration: none;
    color: brown;
    position: relative;
    overflow: hidden;

    &:focus {
        outline: none;
    }

    &:after {
        content: "";
        position: absolute;
        z-index: -1;
        right: 0;
        width: 0;
        bottom: -5px;
        background: red;
        height: 2px;
        transition-property: width;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }

    &:hover:after,
    &:focus:after,
    &:active:after {
        left: 0;
        right: auto;
        width: 100%;
    }
}

_reboot.scss

如下图所示_reboot.scss优先于我自己的CSS。

在不使用!important 或直接编辑_reboot.scss 的情况下应用我自己的text-decoration: none; 样式的正确方法是什么？

感谢您的帮助。

【问题讨论】：

更改包含 CSS 文件的顺序。

标签： css sass bootstrap-4

【解决方案1】：

您需要使用特定性或自然级联来覆盖 Bootstrap 的样式，这就是许多人放弃这些单体框架的原因之一，因为在必须覆盖 Bootstrap 的所有内容时创建自定义样式需要很长时间.

例如，您可以使用：

body > div > a {
    text-decoration: none;
}

这可能足以覆盖 Bootstrap 声明。

否则，如果您可以重新排序样式以便您在之后出现，那么根据声明的具体情况，它可能足以或可能不足以在级联中获得优先权。

不要使用 !important，当您需要为链接添加更多样式并发现唯一的方法是添加更多 !importants 时，它会导致更多问题。

查看此处了解有关如何计算特异性的更多信息： https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

【讨论】：

【解决方案2】：

您需要确保您的样式表在 html 文件中最后链接，以便它级联 _reboot.scss。

例如你会这样做：

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="styles.css">
</head>

不要最后链接引导程序，以便您的引导程序级联

【讨论】：

这个比较适用，应该放在上面今天用

【解决方案3】：

如果我可以对上面的答案发表评论，我会（还没有足够的声誉）。

感谢Alex（上）您的回答！这真的很有帮助。我的情况虽然非常相似，但有所不同，需要一点技巧。这通常是一个挑战，因为随着事情的发展，旧的答案会变得过时。

在上述（近 4 岁）正确答案的基础上，我在 Bootstrap 5 中也发现了这个问题。 Alex 提出了一个很好的观点，即利用 Bootstrap 等单体框架。然而，由于开发工作中的资源很少，有时必须做出权衡。在出现更好的解决方案之前，我将 Bootstrap 用作单独的开发人员。

我试图覆盖链接的颜色，但无法让本地 css 样式覆盖 _reboot.scss.247。我当然不想诉诸于！important！

在解决此问题时，我经历了多次迭代，直到找到解决方案：

我在锚标记上尝试了#id 样式
按照 Alex 的建议，我尝试为每个标签添加类样式，包括 Body。
但是，由于我试图将标题超链接更改为与常规标题相同的颜色（有意识的选择），这也改变了文本的颜色（即使我指定了 :hover、:visited 和 :链接）。
最终起作用的是将类添加到每个样式中，除了正文。代码如下...

css sn-p:

.heading-link:link, .heading-link:visited {
        color: #2C4D5C;  /* From the theme's colour palette */
    }
    .heading-link:hover {
        color: #E0E0E0;  /* From the theme's colour palette */
    }

html sn-p（这是来自 Django 模板，因此其中一些代码可能不适合您的上下文）重点是在正文下方的各种标签中使用了标题链接类，从而扩展了 Alex 的以上回答：

<body>
<!-- other html code -->
    <section class="container-fluid px-0 padding-above-articles-header heading-link" id="article-header">
        <div class="text-center d-block">
            <img src="{% static 'articles/images/Collab-Map-Flat-wide-3272-252-blur-inner.jpg' %}" alt='Article-banner'>
        </div>
        <div class="container-xl article-header-container heading-link">
            <div class="heading-link">
                <div class="row heading-link">
                    <div class="col-lg-8 col-md-10 mx-auto centred-text heading-link">
                        <h1 class="centred-text display-4 heading-link"><a class="heading-link" href="{% url 'articles_home' %}">Articles</a></h1>
                        <div class="padding-above-element-double">
                            <div class="padding-above-element-double">
                                <h6>Breakthrough Inspiration...</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<!-- other html code -->
<body>

结论：从 DRY 的角度来看，我的失败让我感到有些不舒服。但是，如果不重复将这个样式类包含到 html 层次结构中的每个标记中，我根本无法获得我想要的效果。我还没有查看 _reboot.scss 文件（考虑到我的待办事项清单，这是另一个权衡）所以我无法说出原因（我也没有经验认为自己甚至离权威很近这个话题）。然而，最终的结果是这个解决方案奏效了，并且是一个很好的例子，说明 Stack Overflow 如何非常有助于处理最微小的利基案例。 :)

【讨论】：

感谢您的洞察力，这仍然适用于 Bootstrap 5。

【解决方案4】：

这是一个古老的问题，但在 Google 上很重要，所以我想我会添加我的工作。

为您的对象添加 id 或自定义类名称。

例如：

html,body{
    color:#222;
}

将不起作用，并会被 _reboot.scss 覆盖。但是，如果您将 id 分配给my-html 和正文 my-body 的 html，那么这将起作用：

#my-html,#my-body{
    color:#222;
}

注意：我使用的是 React-BOOTSTRAP，所以这可能不适用于 NATIVE BOOTSTRAP

【讨论】：

【解决方案5】：

第 1 步：转到全局 style.scss 文件第 2 步：

  @import "~bootstrap/scss/bootstrap.scss";
   a{
        text-decoration:none;
    }

【讨论】：