Error with importing bootstrap from node_modules and import other files out of node_modules

[hrahimi270]

I don't know if this is a bug or mistake from me. I'm using bootstrap and I wanted to import it from node_modules. So when I imported it like @import "~bootstrap/scss/bootstrap";, gulp gives me an error. The error:

Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap.
        from line 1 of src/scss/main.scss
>> @import "~bootstrap/scss/bootstrap";
   ^

After searching on the internet, I found out a way to solve it. By changing the config file in gulpfile.js like this:

src("src/scss/main.scss")
      .pipe(sassGlob())
      .pipe(
        sass({
          includePaths: ["node_modules"]
        }).on("error", sass.logError)
      )
      .pipe(postcss(processors))
      .pipe(concatCss("main-styles.css"))
      .pipe(dest("build/css"));

As you can see, I added includePaths: ["node_modules"] as config for gulp-sass. I also changed my import to @import "bootstrap/scss/bootstrap"; It was ok when I just importing bootstrap from node_modules.

But after adding my second scss file, the second's file styles doesn't compile to css. I don't know what is the problem. I deleted bootstraps import in the first line, and the second file styles were ok.

Everything gets interesting when I import bootstrap in the second line. Now I have bootstrap with the other file styles together!!! But I want Bootstrap to be my first style and rewrite my styles with other files.

Anything that can help? Thanks.

[tkodev]

Don't use ~ , just bootstrap/scss/bootstrap.scss

[garbast]

I'm having the same problem with tabler/tabler. My import is as followed:

@import 'node_modules/@tabler/core/src/scss/tabler';

But tables imports other files with ~ which is not used as node_modules

@import "~bootstrap/scss/functions";

[joonassandell]

If you're using node-sass, you can use the node-sass-tilde-importer like so:

const sass = require('gulp-sass')(require('node-sass'));
const tildeImporter = require('node-sass-tilde-importer');

.pipe(
  sass({
    importer: tildeImporter
  })
)