Using Bootstrap4 with gulp-sass

Question

I have installed bootstrap and jquery using node.

"devDependencies": {
  "babel-preset-es2015": "^6.24.1",
  "babel-register": "^6.26.0",
  "bootstrap": "^4.0.0",
  "del": "^3.0.0",
  "gulp": "^4.0.0",
  "gulp-sass": "^3.2.0",
  "jquery": "^3.3.1"
}

The project structure:

project /
├── node_modules /
├── src /
│   ├── scss /
│   │   ├── _bootswatch.scss
│   │   ├── _variables.scss
│   │   ├── styles.scss

The styles.scss has this content taken from the example

@import "variables";
@import "bootswatch";
@import "~bootstrap/scss/bootstrap";

The gulpfile.babel.js has this function to build the css from scss:

const extRes = () => {
    return gulp.src('src/scss/styles.scss')
        .pipe(sass())
        .pipe(gulp.dest('public/css'));
};

And although PhpStorm doesn't complain that it can't find ~bootstrap/scss/bootstrap, the build process fails because gulp-sass doesn't look in the node_modules.

messageOriginal: File to import not found or unreadable: ~bootstrap/scss/bootstrap.
Parent style sheet: C:/Entwicklung/2018/project/src/scss/styles.scss
relativePath: src\scss\styles.scss
domainEmitter: [object Object]
domain: [object Object]
domainThrown: false

I've also tried to use includePaths for gulp-sass, but I couldn't find a way to specify it so that the build process works.

Somebody give me a little help, please.

Update 1:

Meanwhile I have solved the problem, but PhpStorm now complains that it doesn't know bootstrap. Is it possible to bring both solutions together?

The current styles.scss:

@import "variables";
//@import "~bootstrap/scss/bootstrap";
//noinspection CssUnknownTarget
@import "bootstrap";
@import "bootswatch";

The current gulpfile.babel.js:

const extRes = () => {
    return gulp.src('src/scss/styles.scss')
        .pipe(sass({
            includePaths: ['node_modules/bootstrap/scss/'],
            outputStyle: 'expanded'
        }))
        .pipe(prefix('last 2 versions'))
        .pipe(gulp.dest('public/css'));
};

Answer 1

Normally you need to mark the directory configured as Incude path (node_modules/bootstrap/scss) as Resource root (Mark directory as/Resource root) to make such imports work. But it's not that easy if node_modules are concerned, as the whole folder is excluded, and all dependencies from package.json are added to javascript libraries and thus can't be marked/unmarked as roots... You can try the following:

• in File | Settings | Languages & Frameworks | JavaScript | Libraries, disable/delete the <project_name>/node_modules library

• in Project tool window, select node_modules/bootstrap, Mark directory as/Not excluded

• select node_modules/bootstrap/scss folder, Mark directory as/Resource root