CODEWITHSUNDEEP
htmlcssbootstrap-4
JustABeginner
JustABeginner

Reputation: 341

How can I extend Bootstrap classes in SASS if I only liked to bootstrap in the HTML file?

I am wondering how I can extend bootstrap classes in SASS if I have linked to the bootstrap stylesheet in my HTML file, like done below:

    <!DOCTYPE html>
<html>
    <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">

        <title>Some title</title>
    </head>

I then have a .scss file that generates the additional css file I have also linked to in the head of my HTML document. But for example, If I try to extend any Bootstrap class from the .scss file, like I did here:

    .p3 {
    @extend .p-3;
    font-weight: bold;
    }

it throws an error saying:

Sass::SyntaxError: ".p3" failed to @extend ".p-3". The selector ".p-3" was not found. Use "@extend .p-3 !optional" if the extend should be able to fail.

how do I solve this?

Many thanks,

Upvotes: 2

Views: 3142

Answers (1)

m.popov
m.popov

Reputation: 566

You need to include bootstrap by importing it in your main.scss.

something like:

@import 'bootstrap.scss';

.yourClass {
   @extend .p-3;
   font-weight: bold;
}

For more info read the documentation

Upvotes: 3

Related Questions