Keeping Sass Folder Structure with Gulp/Compass

I'm reorganizing my app structuring to accommodate learning Angular and modularizing the features. i.e. keeping the angular js, html, and css for each feature together. Up until now I simply had a sass folder full of scss files that got compiled into a single css file in a css folder. The gulp file was simple:

gulp.task('styles', function () {
  gulp.src('_components/sass/*.scss')
      .pipe(compass({
        config_file: 'config.rb',
        css: 'app/css',
        sass: '_components/sass'
      }))
      .on('error', errorLog)
      .pipe(gulp.dest('app/css'))
      .pipe(livereload());
});

My config.rb file looks like this:

project_type= :stand_alone
http_path = "/"
css_dir = "app/css"
sass_dir = "_components/sass"
javascripts_dir = "app/js"
images_dir = "img"
line_comments = false
preferred_syntax = :scss
output_style = :expanded
relative_assets = true

Now that I am using Angular, I want to separate the scss and css files based on the feature they correspond with. Instead of having all scss files compile down to one css file, I'd rather have a folder structure within my sass folder that is mimicked in my css folder within the app.

I've tried adding wild cards to the sass directory like sass: '_/components/sass/**/*' (and the same in my config.rb file) but that generates an error: NoMethodError on line ["138"] of C: undefined method 'sub' for nil:NilClass

Basically, I can't figure out how to have gulp/compass recognize a folder structure within my sass folder and mimic that in the css folder.

Any help is appreciated! Thanks! Matt

Try using ** in gulp.src() instead of in the sass_dir and sass options:

gulp.task('styles', function () {
  gulp.src('_components/sass/**/*.scss')
    .pipe(compass({
      config_file: 'config.rb',
      css: 'app/css',
      sass: '_components/sass'
    }))
    .on('error', errorLog)
    .pipe(gulp.dest('app/css'))
    .pipe(livereload());
});