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?

Turgot

Cannot reproduce, your problem is not with Sass: sassmeister.com/gist/7651112d36e67a3cee8d – Eosin

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

Turgot

I attempted many other alternatives to this solution, because I wanted the font css to be inline in my minified css file. I also had another website that seemed to accept the import without timing out. However, this was the only solution that worked for my one case. So strange, but nonetheless it was. Would love to know why some google font imports don't timeout and others do. – Palsgrave

Answer 2

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

Mocha

Maybe but that doesn't fix the problem in the question. – Ravo