Halten der Sass-Ordnerstruktur mit Schluck/Kompass

Question

Ich reorganisiere meine App-Strukturierung, um das eckige Lernen und die Modularisierung der Funktionen zu ermöglichen. h. Halten der Winkel js, html und css für jedes Merkmal zusammen. Bis jetzt hatte ich einfach einen sass-Ordner voller scss-Dateien, die in einer einzigen css-Datei in einem css-Ordner kompiliert wurden. Die schluck Datei war einfach:

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()); 
}); 

Meine config.rb Datei sieht wie folgt aus:

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 

Jetzt, wo ich bin mit Angular ich die SCSS und CSS-Dateien basierend auf der Funktion trennen wollen sie korrespondieren mit. Anstatt alle scss-Dateien auf eine CSS-Datei kompilieren zu lassen, hätte ich lieber eine Ordnerstruktur in meinem sass-Ordner, die in meinem css-Ordner in der App imitiert wird.

Ich habe versucht, Hinzufügen von Wildcards zum sass Verzeichnis wie sass: '_/components/sass/**/*' (und die gleichen in meiner config.rb Datei), aber das erzeugt einen Fehler: NoMethodError on line ["138"] of C: undefined method 'sub' for nil:NilClass

Grundsätzlich kann ich nicht herausfinden, wie zu haben Schluck/Kompass erkennt eine Ordnerstruktur in meinem Sass-Ordner und ahmen diese im Css-Ordner nach.

Jede Hilfe wird geschätzt! Danke! Matt

Answer 1

Try ** in gulp.src() statt in den sass_dir und sass Optionen:

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()); 
});