5

.scssファイルで次のコードを使用すると

@import url('//fonts.googleapis.com/css?family=SomeFont:400,700,400italic');

私が使用するSASSパーサー（nodejs gulp-sass）は、上記の場所からファイルを喜んでダウンロードし、コンパイルされた出力にプレーンテキストとして含めます。

これが私のGulpfileです：

var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    autoprefixer = require('gulp-autoprefixer'),
    minify = require('gulp-minify-css'),
    rename = require('gulp-rename'),
    sass = require('gulp-sass'),
    uglify = require('gulp-uglify'),
    plumber = require('gulp-plumber');

gulp.task('sass', function() {
    gulp.src('www/sass/*.scss')
        .pipe(plumber(function(err){
            console.log(err);
            this.emit('end');
        }))
        .pipe(sourcemaps.init())
            .pipe(sass({
                outputStyle: 'expanded',
                errLogToConsole: true,
            }))
            .pipe(autoprefixer('last 2 version'))
            .pipe(rename({suffix: '.min' }))
            .pipe(minify())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('www/css'));
});

問題は、私のサイトは を使用してHTTPSおり、ファイルがコンパイラによって要求されると、ファイルをフェッチするためHTTP、返された応答の URL もHTTP、コンソールをいっぱいにする警告のロードになりますが、フォントはロードされません.

コンパイラにその行をそのままにしておくように指示する方法はありますか?

4

2 に答える 2

13

問題はgulp-sassそれ自体ではなくgulp-minify-css、レンダリングされた CSS ファイルの圧縮にありました。解決策はに渡す{processImport: false}ことminifyです：

gulp.task('sass', function() {
    gulp.src('www/sass/*.scss')
        .pipe(plumber(function(err){
            console.log(err);
            this.emit('end');
        }))
        .pipe(sourcemaps.init())
            .pipe(sass({
                outputStyle: 'expanded',
                errLogToConsole: true,
            }))
            .pipe(autoprefixer('last 2 version'))
            .pipe(rename({suffix: '.min' }))

            // Here
            .pipe(minify({processImport: false}))

        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('www/css'));
});
于 2015-08-14T02:51:20.603 に答える