スタイルガイドsc5-styleguideでGoogle Fontsを使う

個人的には、スタイルガイドは、sc5-styleguideが一番モダンな感じがして好みです。

sc5-styleguidを使っていて、Google Fonts（webフォント）を使用したクラスのガイドを作成しようとした時につまづきました。

// リセットCSS
@import "reset.scss";
// cssアニメーション用キーフレームCSS
@import "keyframes.scss";
// 共通要素のCSS
@import "common.scss";

// webフォント読み込み
@import url('https://fonts.googleapis.com/css?family=Roboto');

上のようにscssファイルに@import使ってwebフォントの読み込みをしようとしていたんですが、スタイルガイドが表示されませんでした。

しばらく格闘していましたが、よくターミナルを見てみると、

[17:39:38] Starting 'styleguide:generate'...
[17:39:38] Starting 'styleguide:applystyles'...
Please check validity of the block starting from line #8

とあって、どうやらwebフォントの読み込みの8行目の@importの行がスタイルガイドのvalidateに引っかかってダメな模様・・・

あれこれ調べていたらscssに書くのではなく、Gulpのスタイルガイドの設定の方で、webフォントを追加すれば良いということで以下のように変更しました。

gulp.task('styleguide:generate', function() {
  return gulp.src('common/sass/**/*.scss')
    .pipe(plumber())
    .pipe(styleguide.generate({
        title: 'My Styleguide',
        server: true,
        rootPath: outputPath,
        overviewPath: 'README.md',
        port : 4000,
        beforeBody: "" // ここにwebフォントの読み込みを追加
      }))
    .pipe(gulp.dest(outputPath));
});

スタイルガイドのgenerateの引数に「beforeBody」部分を追加しました。なるほど、beforeBodyを使って、先に読んでおくんですね。こうすることで無事にスタイルガイド内でGoogle Fontsが使えるようになりました。