Posted at

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

More than 3 years have passed since last update.

(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