Using gulp-sass-glob in Visual Studio

Question

In Visual Studio (Task Runner Explorer), I am trying to use gulp-sass-glob in my SCSS:

gulpfile.js

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  sassGlob = require('gulp-sass-glob');

gulp.task('css', function () {
  return gulp.src('./gulp/scss/**/*.scss')
    .pipe(sassGlob())
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./css'));
});

site.scss

@import "modules/**/*.*";

But in Task Runner Explorer, I get the following error:

Error: File to import not found or unreadable: modules/**/*.*
Parent style sheet: C:/Users/.../scss/site.scss
  on line 95 of gulp/scss/site.scss
  >> @import "modules/**/*.*";

Does anybody know how to fix this error or if this is even achievable when using SCSS and gulp in Visual Studio?

score 1 · Answer 1 · answered Jun 28 '16 at 13:09

gulp-sass-glob uses the glob package for path globbing. Its documentation has this to say about **:

** If a "globstar" is alone in a path portion, then it matches zero or more directories and subdirectories searching for matches.

Notice the bolded part. It means ** only has special meaning when its the only thing between two slashes /.

Try the following in your site.scss:

@import "modules/**/*.*";

Using gulp-sass-glob in Visual Studio

1 Answers1