gulp-sass: ERROR - file to import not found or unreadable

Question

I am having problems getting my SASS files to compile having now split them out and importing ones I require in my main scss file.

I have a styles folder that contains:

main.scss

top_menu.scss

I have added some imports to my main.scss:

@import 'font-awesome';
@import 'bootstrap';
@import 'custom_bootstrap';    
@import 'top_menu';

and my gulp-sass task looks like this

gulp.task('compile_sass', ['compile_bower_sass'], function () {
  return gulp.src(paths.scss_files, {base:'src'})
    .pipe(gulp.dest(paths.dist))
    .on('error', gutil.log)
    .pipe(sass().on('error', sass.logError))
    .pipe(minifycss({
      keepSpecialComments: false,
      removeEmpty: true
    }))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest(paths.dist))
});

The paths.scss_files variable is set to:

scss_files: './src/assets/styles/**/*.scss'

When the task runs I receive an error:

file to import not found or unreadable: top_menu

I actually want to be able to split my scss out into separate related sub folders and then use @import: 'navigation\top_menu' kinda thing.

Why would this error be coming up?

Thanks

EDIT:

The compile_bower_sass task compiles some other scss files (font-awesome, bootstrap, custom_bootstrap) which are required as you can see from the @import lines on my main.scss.

When running the compile_sass task and watching the output (dist) folder, I see the css files get generated from the compile_bower_sass task (so font-awesome.css, bootstrap.css, custom_bootstrap.min.css). I notice that the top_menu.scss file gets copied across too, but does not get compiled, so I guess this is why the error occurs.

Do I need to specify an order in my task, so could I make sure it compiles main.scss last to ensure any required files such as my custom top_menu.scss get compiled first and are available for my main file to access?

EDIT 2

OK, so I think my thoughts this was down to the order of compilation is correct.

If I change my scss_files variable to explicitly set the order they get piped to the gulp-sass (this time I have further organised into folders)

scss_files:          ['./src/assets/styles/custom_bootstrap.scss',
                        './src/assets/styles/navigation/top_menu.scss',
                        './src/assets/styles/navigation/user_toolbar.scss',
                        './src/assets/styles/main.scss']

Now my original compile-sass task works as is.

So, my next question is how do I configure gulp-sass so that I can ensure my main.scss file is compiled last? Or am I going about this all the wrong way?

EDIT 3:

I should probably have added these extra task configs when first asking this question. So the compile_sass task requires compile_bower_sass to be run first.

    /*-BOWER PACKAGEs INCLUSION --------------------------------------------*/
    gulp.task('compile_bower_sass', ['compile_bower_css'], function(){
      var sassFiles = mainBowerFiles('**/*.scss');
      return gulp.src(sassFiles)
        .pipe(rename(function(path){
          path.basename = path.basename.replace(/^_/, '');
          return path;
          // required where the string begins with _ , meaning that sass won't compile it (bootstrap)
        }))
        .pipe(sass({onError: function(e) { console.log(e); } }))
        .pipe(gulp.dest(paths.dist_styles));
    });

    gulp.task('compile_bower_css', function(){
      var cssFiles = mainBowerFiles('**/*.css');
      return gulp.src(cssFiles)
        .pipe(gulp.dest(paths.dist_styles));
    });

gulp.task('compile_sass', ['compile_bower_sass'], function () {
  return gulp.src(paths.scss_files, {base:'src'})
  .pipe(sass({outputStyle: 'compressed'})
      .on('error',   sass.logError))
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest(paths.dist))
});

Im now ending up with

file to import not found or unreadable: font-awesome

In my dist style folder I can see font-awesome.css has been generated. I am pretty new at gulp and sass compilation, so no doubt I have misunderstood something here.

When the @import statement is used, is the file looking for that named scss or css file?

Answer 1

I have been having the same issue (using a mac with Sierra) and it seemed to only happen when I was using the glob style of including.

It turns out it is due to a race condition, you can work around it by putting a short wait in like so...

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

gulp.task('scss', function () {
    gulp.src('resources/scss/**/*.scss')
        .pipe(wait(200))
        .pipe(sass())
        .pipe(gulp.dest('public/dist'));
});