将 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)的目录标记为Resourceroot(标记目录 as/Resource root) 以使此类导入工作。但如果涉及 node_modules 就没那么容易了，因为整个文件夹都被排除在外，并且来自 package.json 的所有依赖项都添加到 javascript 库中，因此不能 marked/unmarked作为根... 您可以尝试以下方法：

在文件中 |设置 |语言与框架 | JavaScript |图书馆、disable/delete <project_name>/node_modules 图书馆
在项目工具window,selectnode_modules/bootstrap,标记目录as/Not排除
selectnode_modules/bootstrap/scss文件夹，标记目录as/Resourceroot

将 Bootstrap4 与 gulp-sass 一起使用

Using Bootstrap4 with gulp-sass

phpstorm

gulp

gulp-sass

bootstrap-4