How to collect SASS files correctly?

Question

css

Good afternoon, colleagues! I use gulp + sass to build styles, the following question arose: Usually, when assembling styles, I use a separate file in which I include all the necessary fonts, specify site color variables, common mixins, and so on, in general, everything that is repeated within one site (system file).
Next, let's say I need to use the variables from this file in header styles (header), main styles (main) and footer styles. Accordingly, in order to use them, I include the system file using import in header.sass, main.sass, footer.sass. Everything is ok, everything works.
The problem arises when I connect the already collected css files to the site. As a result, the code with colors from the system file is duplicated in every file in which I included it (logically), and this is not quite what I would like to get. I need the ability to use all the variables from the system file, so that their code, for example, is only in the header file (because it is included on all pages of the site) and is not duplicated anywhere else.
The problem is that if I do not import the system file wherever I use its variables, then gulp starts swearing that the variables do not exist, and if I import into each file, the system file code is then duplicated 3-5 times on the page.
Question: How can I correctly include a system file with constants, colors and mixins so that its code is available in header.sass, main.sass and footer.sass, but is not duplicated in header.css, main.css and footer when building. css, but was stored in only one file, let's say header.css.
I hope I didn't explain too confusingly ( I would be grateful for any help and tips in the right direction.
Gulpfile.js code:

var gulp 	 = require('gulp'),
  sass 	 = require('gulp-sass'),
  imagemin = require('gulp-imagemin'),
  jsmin	 = require('gulp-uglify'),
  prefixer = require('gulp-autoprefixer'),
    cssGlobbing = require('gulp-css-globbing');

gulp.task('sass', function () {
  	return gulp.src(['./local/blocks/**/*.sass', './local/blocks/**/*.scss'])
    .pipe(sass({outputStyle: "expanded"}).on("error", sass.logError))
    .pipe(cssGlobbing())
    .pipe(gulp.dest('./local/blocks/'));
});

gulp.task('set-prefix', function(){
  gulp.src('./local/blocks/**/*css')
    .pipe(prefixer({
        browsers: ['last 2 versions'],
    }))
    .pipe(cssGlobbing())
    .pipe(gulp.dest('./local/blocks'))
});

gulp.task('imagemin', function(){
  gulp.src('./local/img/*')
  .pipe(imagemin({
        progressive: true,
        optimizationLevel: 5,
        svgoPlugins: [{removeViewBox: false}]
    }))
    .pipe(cssGlobbing())
  .pipe(gulp.dest('./local/img'))
});

gulp.task('watch', ['sass', 'set-prefix'], function(){
  gulp.watch(['./local/blocks/**/*.sass', './local/blocks/**/*.scss'], ['sass']);
});

Answer 1

I don't know how in gulp, I think it's also possible. In webpack, I make the main style main.scss, in which I first import the file with variables, mixins, frameworks, and then I import each file separately.
Specifying manually is more convenient, because you know exactly which files are connected and in what order. And besides, variables and mixins are available for all files (as well as variables and framework mixins).
Anyway, in the end, everything should be in one css file, and for convenient work through devtols, you need to use source map