gulp-sass 将 Google Fonts CSS 编译到文件中，中断协议相关链接 [英] gulp-sass compiles Google Fonts CSS into the file, breaks protocol-relative link

问题描述

当我在 .scss 文件中使用以下代码时

When I use the following code in my .scss file

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

我使用的 SASS 解析器 (nodejs gulp-sass) 愉快地从所述位置下载文件并将其作为纯文本包含在编译输出中.

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.

这是我的 Gulp 文件:

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

问题是，我的网站使用 HTTPS，当编译器请求文件时，它使用 HTTP 获取文件，因此返回响应中的 URL也是 HTTP 导致控制台出现大量警告，而字体不会加载.

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?

推荐答案

问题不在于 gulp-sass 本身，而在于 gulp-minify-css渲染的 CSS 文件的压缩.解决方法是将 {processImport: false} 传递给 minify:

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

这篇关于gulp-sass 将 Google Fonts CSS 编译到文件中，中断协议相关链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！