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

问题描述

在我的 .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（））
 （$ {
 outputStyle：'expanded'，
 errLogToConsole：true，
}））
 .pipe（autoprefixer（'last 2 version'））
。（重命名（{后缀：'.min'}））
 .pipe（minify（））
 .pipe（sourcemaps.write（'。'））
 .pipe gulp.dest（'www / css'））; 
}）; 
  

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

有什么办法可以告诉编译器离开那一行独自一人？

解决方案

这个问题与 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（{（suffix：'.min'}））
 
 //这里
 .pipe（minify（{ processImport：false}））
 
 .pipe（sourcemaps.write（'。'））
 .pipe（gulp.dest（'www / css'））; 
} ）; 
  

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

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