Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap

I am not using webpack, but I got the same error when I try to import bootstrap in my scss file like this:

@import 'bootstrap';

It would work if I just import it like this in my case:

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

But since That is not clean enough to my liking, I found out I could alter my gulp scss task from:

.pipe(plugins.sass())

to:

.pipe(plugins.sass({
    outputStyle: 'nested',
    precision: 3,
    errLogToConsole: true,
    includePaths: ['node_modules/bootstrap/scss']
}))

(notice the includePaths section) and now I can just use

@import 'bootstrap';

In my scss file

I had a similar error

File to import not found or unreadable: node_modules/bootstrap-sass/assets/stylesheets/bootstrap

Just add "bootstrap-sass": "^3.3.7", to devDependencies at yours package.json, ad run npm update, npm install in your project directory.

For me, I had to change the way I was importing

@import '../../../node_modules/bootstrap/scss/bootstrap';

Then it works

When Sass is precompiled by its own CLI, it processes @imports by itself, and sometimes thus doesn’t understand ~ notation. So you can import "node_modules/bootstrap/scss/bootstrap"; in first place and replaced the ~ notation with node_modules/ instead.