Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 686
SeinopSys Avatar asked Aug 14 '15 02:08

SeinopSys


1 Answers

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'));
});
like image 105
SeinopSys Avatar answered Oct 11 '22 14:10

SeinopSys