gulp-sass 将 Google 字体 CSS 编译到文件中，破坏相对协议 link

Question

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

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

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

这是我的 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 这会导致大量警告填满控制台，而字体不会加载。

有什么方法可以让编译器不理会那一行吗？

Answer 1

问题不在于 gulp-sass 本身，而在于 gulp-minify-css 对呈现的 CSS 文件进行了压缩。解决方案是将 {processImport: false} 传递给 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。我建议将 URL 设置为 HTTPS 并保持这种状态。

gulp-sass 将 Google 字体 CSS 编译到文件中，破坏相对协议 link

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

sass

protocol-relative

gulp

gulp-sass

gulp-clean-css