Search code examples
csssassbootstrap-4

Bootstrap 4 - Reboot.scss overriding Global.scss

I am using Sage Starter Theme and I am adding some CSS to style the links globally in the _global.scss file. Some of the CSS properties are being overridden by Bootstrap, from the file _reboot.scss.

_global.scss

This styling adds a basic underline on hover effect to all my links.

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

As shown in the following image _reboot.scss is taking priority over my own CSS.Image

What is the correct way to apply my own styling of text-decoration: none; without using !important or editing _reboot.scss directly?

Thanks for the help.

Solution

  • You need to make sure that your stylesheet is linked last in the html file so that it cascades _reboot.scss.

    for example you would do:

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

    intead of linking bootstrap last so that yours cascades bootstrap