More than 5 years have passed since last update.

gulp-sassのコンパイル後のcssをいつもの見た目にしたい

Posted at 2015-10-27

(2015/10月時点の記事です)
ドキュメントを見ろという話ですが、書きます。
https://www.npmjs.com/package/gulp-sass

gulp-sassのコンパイル後の出力cssが
こんな感じになって気持ち悪かったです。

style.css

body {
  background: red;}

p {
  font-size: 10px;}

outputStyle(アプトプットスタイル)の変更で解決できました。
outputStyle: 'expanded'

gulpfile.js

gulp.task("sass", function() {
     gulp.src("sass/**/*scss")
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest("./css"));
});

style.css

body {
  background: red;
}

p {
  font-size: 10px;
}

はいすっきりです！

僕は最初に他のネットの記事の記述で適用されませんでした。
この記事も古くなるかもです。
だめな時は公式ドキュメント見てください
https://www.npmjs.com/package/gulp-sass