SASS/source maps laden nicht mit verschachtelten Strukturen

Question

Ich ging von allen SASS-Dateien, die sich im selben Verzeichnis befinden, in eine verschachtelte Struktur wie folgt. Jetzt, wenn ich ein Element in Chrome inspiziere, bringt es mich zur falschen Quellkarte. Zum Beispiel, wenn ich einen Knopf inspiziere, anstatt zu den _Buttons teilweise zu gehen, geht es zu einem anderen zufälligen Teil, der nicht verwandt ist. Wer weiß, warum das passiert? Muss sich etwas in meiner Schluckakte ändern?

Answer 1

https://www.npmjs.com/package/sass-module-importer

Das Problem mit dem zu tun hatte zu installieren, wie wir die Sass und CSS-Dateien zusammen in der main.scss Datei wurden importieren, und die Kopie von CSS-Dateien in der Schluckdatei machen. Die einfachste Lösung war die Einbindung des Sass-Modul-Importers. Die Schluckdatei wird unten mit der endgültigen Lösung aktualisiert.

Answer 2

Sie haben * .scss Dateien, aber in Ihrem gulpjs config.input.sass. Kann falsches Dateiformat sein.

Ich benutze Kompass und es sieht aus wie dieses

gulp.task('compass', function() { 
    gulp.src(inputDir+'/*.'+fileType) 
     .pipe(compass({ 
      css: outputDir, 
      sass: inputDir, 
      sourcemap: true 
     })) 
     .pipe(gulp.dest(outputDir)) 
     .pipe(connect.reload()); 
}); 

Das ist mein Arbeitsbeispiel ist. Sie können main.css.map siehe erzeugt Sie benötigen https://www.npmjs.com/package/gulp-sass https://www.npmjs.com/package/gulp-sourcemaps