Extending bootstrap in create react app

Question

I am tyring to extend boostrap classes in my sass file. I'm compiling my sass as in this example.

I have copied the boostrap files into my /src folder.

However, using this basic example:

@import "bootstrap/*";

.header{
    @extend .container;
    background-color:red;

}

I get the error:

{ "status": 1, "file": "C:/sites/mharrisweb-redux/src/sass/style.scss", "line": 1, "column": 1, "message": "File to import not found or unreadable: bootstrap/.\nParent style sheet: C:/sites/mharrisweb-redux/src/sass/style.scss", "formatted": "Error: File to import not found or unreadable: bootstrap/.\n Parent style sheet: C:/sites/mharrisweb-redux/src/sass/style.scss\n on line 1 of src/sass/style.scss\n>> @import \"bootstrap/*\";\n ^\n" }

Answer 1

If you have this file structure:

src                
  bootstrap
  sass
    style.scss                     

You should use:

@import "../bootstrap/scss/bootstrap";

If you installed Bootstrap using package manager (npm or yarn), you could use:

@import "~bootstrap/scss/bootstrap";