Gulp-Sass nicht kompilieren scss-Datei

Question

Ich benutze Gulp, um meine Sass in CSS zu kompilieren. Eine einfache Aufgabe kompiliert die Datei style.scss im Verzeichnis _/sass und speichert die Ausgabe im Stammverzeichnis des Projekts. style.scss wird nur zum Importieren anderer Dateien im Verzeichnis _/sass verwendet.

Wenn ich den Standard-Task von der Befehlszeile ($ gulp) ausführen, erhalte ich einen Fehler, den die Sass nicht kompilieren kann. Es ist unten vollständig enthalten. Ich habe den gesamten Inhalt aus den enthaltenen Dateien entfernt und führe die Aufgabe erneut aus. Ich erhalte immer noch den gleichen Fehler (etwas, das ich online gelesen habe, schlug vor, dass dies möglicherweise auf ein Codierungsproblem hin überprüft werden würde. Ich verstehe die Codierung nicht ganz und weiß, wie das in meinem Szenario zu Problemen führen könnte).

Ich habe auch von der Befehlszeile $ sass _/sass/style.scss style.css ausgeführt, die perfekt mit Inhalten in den enthaltenen Dateien funktioniert. Dies deutet auf ein Problem mit dem Gulp Sass Plugin hin.

Die entsprechenden Auszüge aus gulpfile.js:

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

// Compile sass files 
gulp.task('sass', function() { 
    gulp.src('./_/sass/style.scss') 
     .pipe(sass()) 
     .pipe(gulp.dest('./')); 
}); 

// The default task (called when you run `gulp`) 
gulp.task('default', function() { 
    gulp.run('sass'); 

    // Watch files and run tasks if they change 

    gulp.watch(['./_/sass/style.scss'], function() { 
    gulp.run('sass'); 
    }) 
}); 

der komplette Inhalt des style.scss:

/* RESET */ 
@import '_/sass/reset'; 
/* TYPOGRAPHY */ 
@import '_/sass/typography'; 
/* MOBILE */ 
@import '_/sass/mobile'; 
/* MAIN */ 
@import '_/sass/main'; 

Die Verzeichnisstruktur:

├── _ 
│   ├── inc 
│   │   ├── stuff 
│   ├── js 
│   │   ├── otherstuff.js 
│   └── sass 
│    ├── main.scss 
│    ├── mobile.scss 
│    ├── print.scss 
│    ├── reset.scss 
│    ├── style.scss 
│    └── typography.scss 
├── gulpfile.js 
└── style.css 

Klemme ausspuckt:

[gulp] Using file /Users/jeshuamaxey/project/dir/path/gulpfile.js 
[gulp] Working directory changed to /Users/jeshuamaxey/project/dir/path/html5reset 
[gulp] Running 'default'... 
[gulp] Running 'sass'... 
[gulp] Finished 'sass' in 3.18 ms 
[gulp] Finished 'default' in 8.09 ms 

stream.js:94 
     throw er; // Unhandled stream error in pipe. 
      ^
source string:11: error: file to import not found or unreadable: 'reset' 

Answer 1

Ihre Importe halten als in Ihrem Zug sass Modul als Argument ist, geben Sie einfach die includePaths Option:

gulp.src('./_/sass/style.scss') 
     .pipe(sass({ includePaths : ['_/sass/'] })) 
     .pipe(gulp.dest('./')); 

... sollte es für Sie tun.

Per https://github.com/dlmanning/gulp-sass/issues/1

Answer 2

Dazu müssen Sie mit dem gleichen gulpfile.js Ordner fangen

@import '_/sass/reset' 

Ich denke, die Gulp den Import liest und finden Sie die Datei aus dem gulpfile.js befinden

Answer 3

Wenn Sie Windows und Sublime Text verwenden, sollten wir Regeln in Ihrem Sunlime Config hinzuzufügen. Fügen Sie einfach "atomic_save" : true in den Einstellungen> Einstellungen-Benutzer

https://github.com/dlmanning/gulp-sass/wiki/Common-Issues-and-Their-Fixes#partials-sporadically-not-found