Remote-Import-Fonts mit Gulp

Question

So stelle ich fest, dass mein aktuelles Gulp-Setup keine Remote-Fonts wie Google Fonts importiert. In meiner main.scss Datei habe ich:

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,700,700italic,400italic,900,900italic); 

Und wenn es sieht minimiert kompiliert es so etwas wie diese:

@font-face{font-family:Lato;font-style:normal;font-weight:100;src:local('Lato Hairline'),local('Lato-Hairline'),url(../../fonts.gstatic.com/s/lato/v11/zJY4gsxBiSo5L7tNutxFNg.ttf) format('truetype')} 

ich gulp-minify-css bin mit dem Clean-CSS verwendet. Ich weiß, dass Sie etwas tun müssen, damit entfernte Importe korrekt funktionieren, aber das Lesen der Dokumente hat mir mehr Fragen und Antworten hinterlassen. Hier ist ein Abschnitt meiner Schluck-Datei, die die Sass/CSS-Verfälschung behandelt:

Jede Hilfe wäre willkommen! Vielen Dank.

Answer 1

Ihr Problem ist aufgrund des Mangels an CSS-Dateien zu importieren. Sie müssen die CSS-Datei kopieren und in eine * .scss-Datei umbenennen. Die scss-Datei kann korrekt importiert werden.

Sie müssen installieren und erfordern schlucke-Umbenennungs: https://www.npmjs.com/package/gulp-rename

Im Fall von Ihrem Beispiel Sie auch an Benutzer schluck-google-Webfonts in Erwägung ziehen könnte: https://www.npmjs.com/package/gulp-google-webfonts

fonts.list:

Lato:400,100,100italic,300,300italic,700,700italic,400italic,900,900italic 

gulpfile.js:

var gulp = require('gulp'); 
var googleWebFonts = require('gulp-google-webfonts'); 

var options = { }; 

gulp.task('fonts', function() { 
    return gulp.src('./fonts.list') 
     .pipe(googleWebFonts(options)) 
     .pipe(gulp.dest('out/fonts')) 
     ; 
    }); 

gulp.task('default', ['fonts']);