gulpgulp-sass

gulp-sass fails to compile using @import full directories with underscore name files


Quick summary, I'm using @import "dir/**/*" to import around 100 or so _filename.scss. The underscore is important here. If I use "@import "dir/specific_path/filename;" and add all the files individually, they work fine, everything compiles. But it won't work for whole directory. However, If I rename my files filename.scss everything works perfectly, and the directory import works (note, just removing the underscore from the file name).

This could possibly be a bug with gulp-sass, but I want to make sure I am not missing some parameter or something. I could just rename the files, but I'd like to use the convention _filename.scss for files that are not meant to be used alone.

Sass task (gulpfile.js):

gulp.task('sass', function() {
    return gulp.src('./source/css/pattern-global.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({includePaths: ['./source/_patterns/']}).on('error', sass.logError))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./source/css/patterns/'));
});

I'm working on the Drupal Pattern Lab site. But the directory structure does not matter much, since it's a matter of file names...

The file where I am calling @import:

@import "../_patterns/**/*";

The error I get when the file names are with an underscore:

Error in plugin 'sass'

Message: source/css/pattern-global.scss Error: File to import not found or unreadable: ../_patterns/**/*. Parent style sheet: /Users/XXXXX/Sites/drupal_pattern_lab/source/css/pattern-global.scss on line 5 of source/css/pattern-global.scss

@import "../_patterns/**/*"; ^

Note: I went through a lot of the gulp-sass issues here, and I don't think there is one that matches my issue.

Summary: Keeping everything identical except the files that I am compiling renamed from _filename.scss to filename.scss and everything works. Or using @import on the specific file instead of directory also works fine.

Thanks


Solution

  • After scratching me head for a while I found the npm package gulp-sass-glob.

    gulp.task('sass', function() {
      return gulp.src('./source/css/pattern-global.scss')
        .pipe(sourcemaps.init())
        .pipe(sassGlob()) // this I was missing
        .pipe(sass({includePaths: ['./source/_patterns/']}).on('error', sass.logError))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./source/css/patterns/'));
    });