Как заставить gulp компилировать scss нормальное css в плане табуляции?

Question

[Вазген Алексанян]

Comments

[Вазген Алексанян]

нужен чтобы было как второе

[Модератор]

VazgXa, Не нужно писать комментарии в Ответах

[sim3x]

VazgXa, первый вариант нагляднее

[Родион Мещеряков]

А зачем нужно получать "нормальное" форматирование в css? В данном случае, это всего лишь результат компиляции, с которым не требуется работать напрямую. В идеале лучше вообще компилировать минимизированный файл css в одну строку.

[Вазген Алексанян]

Родион Мещеряков, Бывает от меня хотят простой css, в смысле gulp и вся эта сборка не бывает им нужным, но я всегда либо через gulp либо webpack-ом работаю. Но я сейчас сделал так как вы сказали(минифицировал с помощью gulp-clean-css). а на конце мой редактор позволяет выделять все и сделать BEAUTIFY выделенное.

Answer 1

[Alex]

outputStyle: "expanded"

Comments

[Вазген Алексанян]

.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
Так сделал не сработало

[Alex]

VazgXa, Странно.
У меня вот такой таск

function scss() {
  return gulp
    .src(dir.src + '/scss/*.scss', { sourcemaps: !isProd })
    .pipe(require('gulp-sass')({ outputStyle: isProd ? 'compressed' : "expanded" }))
    .pipe(gulp.dest(dir.build + '/css', { sourcemaps: true }))
}

Результат

@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  text-align: left;
  background-color: #fff;
}