使用Bootstrap4和gulp-sass

Question

我已经使用node安装了bootstrap和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的内容取自example

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

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没有查看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

我也尝试将includePaths用于gulp-sass，但我找不到指定它的方法，以便构建过程有效。

请有人给我一点帮助。

更新1：

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

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

Answer 1

通常，您需要将配置为 Incude path （node_modules/bootstrap/scss）的目录标记为资源 root（标记目录为/ Resource root ）使这样的进口工作。但是如果node_modules被关注起来并不容易，因为排除了整个文件夹，并且package.json中的所有依赖项都被添加到javascript库中，因此无法标记/取消标记作为根... 您可以尝试以下方法：

文件中的

• 设置|语言与框架| JavaScript |库，禁用/删除<project_name>/node_modules库

在项目工具窗口中

• ，选择node_modules/bootstrap，将目录标记为/未排除

• 选择node_modules/bootstrap/scss文件夹，将目录标记为/资源根