gulp-sassのコンパイルがうまくいかないと思ったらautoprefixerが消してた話

4794 ワード
Autoprefixer gulp CSS Sass scss CSS テキストリンク

TL; DR

この記事は、Gulpでsass(scss)をコンパイルしてる人がautoprefixerを噛ませていたら、ベンダプレフィクス消えてるかも。というお話。

環境

  • Windows10
  • WSL (Windowsの中にUbuntuが...!)
  • gulp v4
    • autoprefixer
    • gulp-sass
    • browser-sync (関係ないけど一応

やったこと

状況の確認

今回やりたかったことは、記事のタイトル一覧などの動的ページでタイトルを並べる時、
長すぎｨ！なタイトルを、CSSで以下のように三点リーダ（…）で省略したかった。

1行の時
.longBrilliantTitleName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
複数行の時
.quiteLongBrilliantTitleName {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* clampしたい行数 */
  overflow: hidden;
}

※ただし2行以上の複数行ではwebkitを使用しているのでchrome,safariなどでしか使えない。

だが、何故かgulp-sassでcssを出力しても複数行で三点リーダが出ない。
で、出力されたcssを確認すると、

gulp-sassとautoprefixerを経て出力されたcss
.quiteLongBrilliantTitleName {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

あれ、小生の-webkit-box-orient: vertical;が消えてる...。

解決

どうやらautoprefixがベンダプレフィクスを消していた模様。なので安直ではあるが、gulpfiles.jsでscssをコンパイルする過程で、autoprefixerに、ベンダプレフィクスを消さないで。と頼んでみた。

gulpfile.js(適宜省略
gulp.task('scss', function() {
  return gulp.src(paths.scss)
    .pipe(sass(sassOptionsIsCoco))
    .pipe(autoprefixer({remove:false})) // 消さないで。の設定
    .pipe(gulp.dest(paths.css));
});

解決。
やったぜ。

参考

1153:絶対素数(c++)
関数ポインタとポインタ関数、および関数ポインタ配列