Phông chữ nhập từ xa với Gulp

Question

Vì vậy, tôi nhận thấy rằng thiết lập Gulp hiện tại của tôi không nhập phông chữ từ xa như phông chữ google. Trong tập tin main.scss của tôi, tôi có:

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

Và khi nó biên dịch minified nó trông giống như sau:

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

Tôi đang sử dụng gulp-minify-css trong đó sử dụng làm sạch css. Tôi biết có thể bạn phải làm gì đó để nhập khẩu từ xa để hoạt động chính xác nhưng đọc tài liệu đã để lại cho tôi nhiều câu hỏi hơn rồi trả lời. Đây là một phần của tệp gulp của tôi xử lý việc rút gọn Sass/CSS:

// Minimize CSS 
gulp.task('minify-css', function() { 
    return gulp.src('css/src/*.css') 
    .pipe(minifyCss({ 
     compatibility: 'ie8', 
     aggressiveMerging: false 
     })) 
    .pipe(gulp.dest('css/')); 
}); 

Bất kỳ trợ giúp nào sẽ được đánh giá cao! Cảm ơn.

Answer 1

Sự cố của bạn là do thiếu sự cố gắng để nhập tệp css. Bạn cần sao chép tệp css và đổi tên nó thành tệp * .scss. Tệp scss có thể được nhập chính xác.

Bạn sẽ cần phải cài đặt và yêu cầu nuốt chửng-đổi tên: https://www.npmjs.com/package/gulp-rename

Trong trường hợp ví dụ của bạn, bạn cũng có thể xem xét để sử dụng ngụm-google-phông chữ web: 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']);