gulp-sass 将 Google Fonts CSS 编译到文件中，中断协议相关链接

Posted 2023-02-25

【中文标题】gulp-sass 将 Google Fonts CSS 编译到文件中，中断协议相关链接

【英文标题】：gulp-sass compiles Google Fonts CSS into the file, breaks protocol-relative link

【发布时间】：2015-11-07 04:41:43

【问题描述】：

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

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

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

这是我的 Gulp 文件：

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

有什么方法可以告诉编译器不要管那一行吗？

【问题讨论】：

无法重现，你的问题不在于 Sass：sassmeister.com/gist/7651112d36e67a3cee8d

【参考方案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'));
);

【讨论】：

我尝试了该解决方案的许多其他替代方案，因为我希望字体 css 内联在我的缩小 css 文件中。我还有另一个网站似乎可以接受导入而不会超时。但是，这是唯一适用于我的一个案例的解决方案。太奇怪了，但它仍然是。很想知道为什么一些谷歌字体导入不会超时而其他人会这样做。

【参考方案2】：

Protocol relative URLs are now discouraged。我建议将 URL 设置为 HTTPS 并保持这种方式。

【讨论】：

也许可以，但这并不能解决问题中的问题。