结构和造型Gulp Sass输出

Posted 2021-05-04

嗨有没有办法改变gulp-sass设置，以便结束括号是在它自己的行？

当前的CSS输出：

body {
  width: 100%; }

我想要的是：

body {
  width: 100%;
}

谢谢！

答案

你可以在sass编译器之后使用gulp-cssbeautify。

gulp.task('sass', function() {
    return gulp.src('./scss/*.css')
       .pipe(sass().on('error', sass.logError))
       .pipe(cssbeautify())
       .pipe(gulp.dest('./css/'));
}

编辑：在我看来乔治H.他的答案更有效率，请看下面。

另一答案

您只需要这段代码：

gulp.task('sass', function(){
  return gulp.src('app/scss/styles.scss')
    .pipe(sass({outputStyle: 'expanded'})) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('app/css'))
});

您需要澄清您想要扩展的输出样式。 在这里您可以找到有关different sass output styles的信息