Как правильно склеить sass файлы при сборке в gulp?

Question

[xonar]

Здравствуйте.

Использую в проекте sass, и для каждой секции на сайте, например header, main, footer создаю отдельно файл стилей sass - header.scss, main.scss, footer.scss.

Эти 3 файла scss я подключаю в главном index.scss через @ import, затем с помощью gulp конвертирую в .css формат, чтоб подключить в index.html один общий стиль index.css.

Но, проблема в том, что у меня создаётся не только index.css, но ещё и header.css, main.css, footer.css как от этого избавиться?

gulp.task('style', function(){
    return gulp.src('./scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({browsers: ['last 2 versions'],cascade: false}))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('./css'));
})

Answer 1

[MIrehiko]

Как вариант. Переименуйте ваши файлы header.scss, main.scss и footer.scss в _header.scss, _main.scss и _footer.scss соответственно. Это скажет сборщику о том что эти файлы компилировать не нужно. Об этом написано в документации по sass в разделе Partials

Answer 2

[Stockholm Syndrome]

return gulp.src('./scss/index.scss')

Comments

[xonar]

Спасибо, оказывается так просто. Сработало.

[posters]

xonar, Есть второй вариант. Можно оставить все как есть в настройках галпа, но вначале файлов header.css, main.css, footer.css к имени добавить нижнее подчеркивание _header.css

[Сергей delphinpro]

posters, есть и третий варик — перед вызовом sass прогнать файлы через gulp-concat

[xonar]

Сергей delphinpro, Спасибо, хороший вариант. Записал себе.