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?
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'));
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With