csssassbootstrap-sass

Extending bootstrap in create react app

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

Solution

  • 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";