使用 compass-importer 时，gulp 字体未正确编译答案

【问题标题】：When using compass-importer and gulp fonts are not being compiled correctly使用 compass-importer 时，gulp 字体未正确编译
【发布时间】：2016-12-21 19:58:36
【问题描述】：

我的问题是我正在使用 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 mixin 似乎没有被正确拉入。但是没有错误。

我想知道这是否与我拥有的 config.rb 文件有关（因为我之前使用的是 Prepos，但是似乎没有将其包含在 compass-importer 中的选项。

奇怪的是我已经将我的 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。

有人有什么想法吗？

【问题讨论】：

你给sass()打了三次电话。我不知道这是否是您的问题的原因或您正在尝试做的事情，但这绝对不是一个好主意...
@SvenSchoenung 谢谢，我已将其删除并将其合并为一个，希望可能有效，但我仍然遇到同样的问题。

标签： gulp font-face compass-sass compass

【解决方案1】：

事实证明compass-importer 不会处理文件或包含正确的 mixin，就像使用 compass 和 ruby 一样。 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;
    }
  }
}

我的解决方案是只更新我的所有文件以包含详细的 CSS，因为这样它不依赖于 compass 或 compass-importer。

我可以更改 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;

}

【讨论】：