将Bootstrap4与gulp sass一起使用

我已经使用node安装了引导和jquery。

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

项目结构:

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

样式。scss的此内容取自 example

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

gulpfile。巴贝尔。js具有从scss构建css的功能:

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

虽然PhpStorm没有抱怨它找不到 ~bootstrap/scss/bootstrap ,生成过程失败,因为gulp sass不在node\u模块中查找。

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

我还尝试将includePaths用于gulp sass,但我找不到一种方法来指定它以使构建过程正常工作。

谁来帮我一下。

更新1:

与此同时,我已经解决了这个问题,但PhpStorm现在抱怨它不知道引导。是否可以将这两种解决方案结合在一起?

当前样式。SCS:

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

当前gulpfile。巴贝尔。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'));
};