gulp-sass compiles Google Fonts CSS into the file, breaks protocol-relative link

Question

When I use the following code in my .scss file

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

the SASS parser I use (nodejs gulp-sass) happily downloads the file from said location and includes it as plain text in the compiled output.

Here's my 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'));
});

Problem is, my site uses HTTPS, and when the file is requested by the compiler, it fetches the file using HTTP and as such the URLs in the returned response are also HTTP which results in loads of warnings filling up the console, while the fonts would not load.

Is there any way I could tell the compiler to leave that line alone?

Answer 1

The issue was not with gulp-sass itself, but with gulp-minify-css that did the compression of the rendered CSS files. The solution is to pass {processImport: false} to 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'));
});

Answer 2

Protocol relative URLs are now discouraged. I would suggest setting the URL to HTTPS and leaving it that way.