title: How to import bootstrap 4 sass/scss from node_modules using gulp
body: <p>I'm trying to @import some bootstrap 4 sass files from node_modules but my gulp watcher isn't picking up any changes to those node_modules bootstrap files.</p>
  
  <p>In my main sass file  I'm importing bootstrap via:</p>
  
  <pre><code>@import "bootstrap-grid";
  @import "bootstrap-reboot";
  @import "custom";
  </code></pre>
  
  <p>Then I also import some "local" sass files (outside of node_modules):</p>
  
  <pre><code>@import "some-file";
  @import "some-other-file";
  etc.
  </code></pre>
  
  <p>These local sass files are watched fine, I get recompilation when I do my edits/file save.</p>
  
  <p>My sass gulp task looks like this:</p>
  
  <pre><code>//compile sass
  gulp.task('sass', function() {
      return gulp.src('src/css/scss/**/*.scss')
          .pipe(sass({
              includePaths: ['node_modules/bootstrap/scss/']
          }))
      .pipe(gulp.dest('src/css/'));
  });
  </code></pre>
  
  <p>The key part for me to pick up the bootstrap files was to use the <strong>includePaths</strong> part.</p>
  
  <p>I am getting the bootstrap grid and what I'm wanting to do is update the node_modules/bootstrap/scss/_custom.scss (which I'm importing) to place bootstrap overrides in.</p>
  
  <p>I'm not quite sure how to get the bootstrap to recompile when I edit/save any node_modules bootstrap files.</p>
  
  <p>I tried updating the includePaths to:</p>
  
  <pre><code>includePaths: ['node_modules/bootstrap/scss/**/*.scss']
  </code></pre>
  
  <p>But that throws an error, "file to import not found" (bootstrap-grid) which also seems odd to me because it seems like it should be adding/watching sass files (and any sub-directories) down in bootstrap/scss.</p>
  
  <p>My file structure at this point is very simple:</p>
  
  <pre><code>root
    |
    | node_modules
        | bootstrap
           | scss
    | src
        | css
           | scss
  gulpfile.js
  </code></pre>