Bootstrap 4 - Reboot.scss 覆盖 Global.scss

问题描述 投票：0回答：6

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

_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。

在不使用 

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

感谢您的帮助。

css sass bootstrap-4
6个回答
15
投票

您需要确保样式表链接到 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>

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

9
投票

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

例如，您可以使用：

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

这可能足以覆盖 Bootstrap 声明。

否则，如果您可以重新排序样式，以便您的样式排在后面，那么根据声明的特殊性，它可能足以或可能不足以在级联中占据优先地位。

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

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

2
投票

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

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

为了建立上述（近 4 年前）的正确答案，我在 Bootstrap 5 中也发现了这个问题。 Alex 就利用 Bootstrap 等整体框架提出了一个很好的观点。然而，由于开发工作中的资源很少，有时必须进行权衡。我作为一名独立开发人员使用 Bootstrap，直到出现更好的解决方案。

我试图覆盖链接的颜色，但无法让本地 CSS 样式覆盖 _reboot.scss.247。我当然不想求助于！重要！

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

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

CSS 片段：

.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 片段（这是来自 Django 模板，因此其中一些代码可能不适合您的上下文）重点是在 body 下面的各种标签中使用 header-link 类，从而扩展了上面 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 如何在处理最特殊的情况时非常有帮助。 :)

2
投票

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

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

这是一个老问题，但在谷歌上排名很高，所以我想我应该添加我的工作。

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

例如：

html,body{
    color:#222;
}

将不起作用，并将被 _reboot.scss 覆盖。 但是，如果您为 

my-html
和 body 
my-body
的 html 提供 id，那么这将起作用：

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

注意：我正在使用 React-Bootstrap，因此这可能不适用于本机 Bootstrap

0
投票

这对我有用！执行以下操作：

  1. 通过 CDN 包含 Bootstrap
  2. 下载引导程序
  3. 每当遇到问题时，请使用 Dipankar Borah 的解决方案，但仅导入导致问题的 Bootstrap CSS 文件（本地存储）。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.