title: Using Bootstrap4 with gulp-sass
body: <p>I have installed bootstrap and jquery using node.</p>
  
  <pre><code>"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"
  }
  </code></pre>
  
  <p>The project structure:</p>
  
  <pre><code>project /
  ├── node_modules /
  ├── src /
  │   ├── scss /
  │   │   ├── _bootswatch.scss
  │   │   ├── _variables.scss
  │   │   ├── styles.scss
  </code></pre>
  
  <p>The styles.scss has this content taken from the <a href="https://getbootstrap.com/docs/4.0/getting-started/webpack/" rel="nofollow noreferrer">example</a></p>
  
  <pre><code>@import "variables";
  @import "bootswatch";
  @import "~bootstrap/scss/bootstrap";
  </code></pre>
  
  <p>The gulpfile.babel.js has this function to build the css from scss:</p>
  
  <pre><code>const extRes = () =&gt; {
      return gulp.src('src/scss/styles.scss')
          .pipe(sass())
          .pipe(gulp.dest('public/css'));
  };
  </code></pre>
  
  <p>And although PhpStorm doesn't complain that it can't find <code>~bootstrap/scss/bootstrap</code>, the build process fails because gulp-sass doesn't look in the node_modules.</p>
  
  <pre><code>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
  </code></pre>
  
  <p>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.</p>
  
  <p>Somebody give me a little help, please.</p>
  
  <p><strong>Update 1:</strong></p>
  
  <p>Meanwhile I have solved the problem, but PhpStorm now complains that it doesn't know bootstrap. Is it possible to bring both solutions together?</p>
  
  <p>The current styles.scss:</p>
  
  <pre><code>@import "variables";
  //@import "~bootstrap/scss/bootstrap";
  //noinspection CssUnknownTarget
  @import "bootstrap";
  @import "bootswatch";
  </code></pre>
  
  <p>The current gulpfile.babel.js:</p>
  
  <pre><code>const extRes = () =&gt; {
      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'));
  };
  </code></pre>