将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

styles.scss的此内容取自

gulpfile.babel.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没有在节点模块中查找

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现在抱怨它不知道引导。有可能将这两种解决方案结合在一起吗

当前的styles.scss：

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

当前的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'));
};

---

通常，您需要将配置为的目录标记为Incude path（

node\u modules/bootstrap/scss

）为Resource根目录（将目录标记为/Resource根目录），以使此类导入工作。但是如果考虑到

node\u modules

，就不那么容易了，因为整个文件夹都被排除在外，并且

package.json

中的所有依赖项都被添加到javascript库中，因此不能标记/取消标记为根。。。 您可以尝试以下操作：

• 在文件|设置|语言与框架| JavaScript |库中，禁用/删除

  /node|u模块

  库

• 在项目工具窗口中，选择

  节点_模块/bootstrap

  ，将目录标记为/notexcluded

• 选择

  node\u modules/bootstrap/scss

  文件夹，将目录标记为/Resource root

---

您是如何指定

包含路径的

？我更新了问题

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'));
};