How to merge sass files correctly when building in gulp?

Question

Sass

Hello.
I use sass in the project, and for each section on the site, for example, header, main, footer, I create a separate sass style file - header.scss, main.scss, footer.scss.
I include these 3 scss files in the main index.scss via @ import, then using gulp I convert to .css format to include one common index.css style in index.html.
But, the problem is that I have not only index.css, but also header.css, main.css, footer.css, how to get rid of this?

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

As an option. Rename your header.scss, main.scss and footer.scss files to _header.scss, _main.scss and _footer.scss respectively. This will tell the builder that these files do not need to be compiled. This is written in the sass documentation in the Partials section.