Zdalne importowanie czcionek za pomocą Gulp

Question

Z tego powodu zauważam, że moja obecna konfiguracja Gulp nie importuje zdalnych czcionek, takich jak czcionki Google. W moim pliku main.scss mam:

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

A kiedy kompiluje minified wygląda mniej więcej tak:

@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')} 

używam gulp-minify-css który wykorzystuje oczyszczenia css. Wiem, że może być coś, co musisz zrobić, aby zdalne importowanie działało poprawnie, ale czytanie dokumentów pozostawiło mi więcej pytań niż odpowiedzi. Oto sekcja mojego pliku, który obsługuje Sass/CSS:

Każda pomoc zostanie doceniona! Dzięki.

Answer 1

Twój problem wynika z braku saszetki do importowania plików CSS. Musisz skopiować plik css i zmienić jego nazwę na plik * .scss. Plik scss można zaimportować poprawnie.

Trzeba będzie zainstalować i wymagają haustem-Zmień nazwę: https://www.npmjs.com/package/gulp-rename

W przypadku swojej przykład można rozważyć także do użytkowników haustem-google-Czcionki Webfonts: 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']);