Sass-gulp error importing whole directory

Question

I'll start by saying I've looked for hours and haven't found any solution that works for me. I'm trying to get away from Compass and switch to Sass for my company's website, and I'm running into the issue that Sass doesn't recognize my directories; I get the "file was not found or unreadable" error.

I've tried to compile using vanilla Sass, gulp-sass, and gulp-ruby-sass, and I get the exact same error on all of them. Here's my folder structure:

- css
- sass
  - variables
     - _colors.scss
     - _type.scss   (... etc.)
  - abstractions
  - base
  - components
- gulpfile.js

My styles.scss file looks like this (there's a bunch of comments at the top):

@import "variables/**/*";
@import "abstractions/**/*";
@import "base/**/*";
@import "components/**/*";

And my gulpfile.js looks like this:

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

gulp.task('sass', function() {
  gulp.src('sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css/'));
});


gulp.task('default', ['sass'], function() {
  gulp.watch("sass/**/*.scss", ['sass']);
});

The exact error I get is:

error sass/lgfcu.styles.scss (Line 23: File to import not found or unreadable: variables/**/*.)

I've tried using "includePaths" with gulp-sass and no luck there. I've also tried playing with the paths: ./variables/**/*, variables/**/*.scss, etc.

If I include the full path to a specific file, it does work, but the globbing is not working. Any help would be greatly appreciated!

Possible duplicate: http://stackoverflow.com/questions/4778627/is-it-possible-to-import-a-whole-directory-in-sass-using-import — cimmanon, Jan 15 '16 at 23:29

score 0 · Answer 1 · answered Oct 18 '16 at 09:27

I had same problem using gulp-sass. If you want import entire directory you have to add gulp-sass-bulk-import.

You can do it by installing it to your project like below:

npm install --save-dev gulp-sass-bulk-import

Then inside your gulpfile.js:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    bulkSass = require('gulp-sass-bulk-import');

gulp.task('sass', [], function() {
    gulp.src( 'sass/**/*.scss' )
        .pipe( bulkSass() )
        .pipe( sass().on('error', sass.logError) )
        .pipe( gulp.dest( './css/' ));
});

Make sure that you are using correct package for handling sass files:

npm install --save-dev gulp-sass

There is another package gulp-ruby-sass which will not work with above script, although its also handy.

Enjoy.

Sass-gulp error importing whole directory

1 Answers1