compass-importerを使用していて、gulpフォントが正しくコンパイルされていない場合

Question

私の問題はcompass-importerとgulpを使用していますが、フォントが正しく表示されないように見えます。

SASS

@font-face { 
    font-family: "Mikado-Regular"; 
    src: font-files("../_fonts/Mikado/mikadoregular-webfont.woff", "../_fonts/Mikado/mikadoregular-webfont.woff2", "../_fonts/Mikado/mikadoregular-webfont.ttf"); 
} 

コンパイルされたCSS

@include font-face("Mikado-Regular", font-files("../_fonts/Mikado/mikadoregular-webfont.woff", "../_fonts/Mikado/mikadoregular-webfont.woff2", "../_fonts/Mikado/mikadoregular-webfont.ttf")); 

それはfont-faceミックスインが正しくに引っ張られている表示されません。ただし、エラーはありません。

私が以前​​を使用していたとして、私は（ただしcompass-importerでこれを含めるためのオプションがあるように表示されませんしているconfig.rbファイルとは何かだ場合、私は不思議だ。

奇妙な何されます私はSASSパスをmain.cssに関連するように更新しました。このconfig.rbファイルは相対パスでは問題ありません。コンパイルされたfont-faceの構文が表示され、ブラウザで404エラーが表示されるはずです。

私のgulpfile.jsの部分は以下の通りです：

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var compass = require('compass-importer') 
var autoprefixer = require('gulp-autoprefixer'); 
var browserSync = require('browser-sync').create(); 

// Setup SASS 
gulp.task('sass', function() { 
    return gulp.src('scss/main.scss') 
    .pipe(sass({ importer: compass }).on('error', sass.logError)) 
    .pipe(autoprefixer('last 2 version', 'ie 10')) 
    .pipe(sass().on('error', sass.logError)) 
    .pipe(sass({ 
      sourceComments: 'map', 
      sourceMap: 'sass', 
      outputStyle: 'expanded' 
     })) 
    .pipe(gulp.dest('../../public/skins/website/_css')) 
    .pipe(browserSync.stream()); 
}); 

可能であれば、gulp-compassを使用しないようにしたいのは、Rubyのインストールを避けたいからです。

誰にもアイデアはありますか？

Answer 1

compass-importerはrubyでコンパスを使用するのと同じ方法でファイルを処理せず、正しいmixinをインクルードしません。 compass-importerは、config.rbファイルをまったく使用しません。

これは_font-face mixinであり、他のフォントタイプの書式タイプ構文は含まれていません。

@mixin font-face($name, $font-files, $eot: false, $weight: false, $style: false) { 
    $iefont: unquote("#{$eot}?#iefix"); 
    @font-face { 
    font-family: quote($name); 
    @if $eot { 
     src: font-url($eot); 
     $font-files: font-url($iefont) unquote("format('embedded-opentype')"), $font-files; 
    } 
    src: $font-files; 
    @if $weight { 
     font-weight: $weight; 
    } 
    @if $style { 
     font-style: $style; 
    } 
    } 
} 

私のソリューションは、ちょうどそれがcompassまたはcompass-importerのいずれかに依存しないこの方法として、冗長CSSを含めるためにすべての私のファイルを更新することです。

私はmixinを変更することができましたが、まだこれを含める必要があるので、compass-importerへの更新があれば上書きされると心配しました。

@font-face { 
    font-family: 'Mikado-Regular'; 
    src: url('../_fonts/Mikado/mikadoregular-webfont.eot'); 
    src: url('../_fonts/Mikado/mikadoregular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../_fonts/Mikado/mikadoregular-webfont.woff2') format('woff2'), 
     url('../_fonts/Mikado/mikadoregular-webfont.woff') format('woff'), 
     url('../_fonts/Mikado/mikadoregular-webfont.ttf') format('truetype'), 
     url('../_fonts/Mikado/mikadoregular-webfont.svg#intro_bold_capsregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

}