गुलप

Question

के साथ रिमोट आयात फ़ॉन्ट्स तो मैं देख रहा हूं कि मेरा वर्तमान गुलप सेटअप Google फोंट जैसे दूरस्थ फ़ॉन्ट आयात नहीं कर रहा है। मेरी main.scss फ़ाइल में मेरे पास है:

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

और जब यह न्यूनतम किया गया संकलित यह कुछ इस तरह दिखता है:

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

मैं gulp-minify-css जो स्वच्छ सीएसएस का उपयोग करता है का उपयोग कर रहा हूँ। मुझे पता है कि रिमोट आयात सही तरीके से काम करने के लिए आपको कुछ करना पड़ सकता है लेकिन दस्तावेज़ों को पढ़ने के बाद मुझे और प्रश्नों के साथ छोड़ दिया गया।

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

किसी भी मदद की सराहना की जाएगी: यहाँ है कि सास/सीएसएस minification संभालती मेरी घूंट फ़ाइल का एक वर्ग है! धन्यवाद।

Answer 1

आपकी समस्या सीएसएस फ़ाइलों को आयात करने के लिए सास की कमी के कारण है। आपको सीएसएस फ़ाइल की प्रतिलिपि बनाने और इसे * .scss फ़ाइल में बदलने की आवश्यकता है। एसएसएस फ़ाइल को सही ढंग से आयात किया जा सकता है। https://www.npmjs.com/package/gulp-google-webfonts

fonts.list:

आप भी उपयोगकर्ता घूंट-google-वेबफ़ॉन्ट करने पर विचार कर सकते अपने उदाहरण के मामले में https://www.npmjs.com/package/gulp-rename

:

आप स्थापित करने की आवश्यकता है और आवश्यकता होगी घूंट-नाम बदलने

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']);