Bootstrap 4 - Reboot.scss 覆盖 Global.scss

Question

我正在使用 Sage Starter 主题，并且正在添加一些 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; 样式的正确方法是什么？

谢谢您的帮助。

原文由 Ben Löffel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

例如，您可以使用：

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

这可能足以覆盖 Bootstrap 声明。

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

---

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

---

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

原文由 Alex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Dipankar Borah 发布，翻译遵循 CC BY-SA 4.0 许可协议