Gulp throws an error when compiling sass after including a variable. Error: Undefined variable: "$text-color-light". What to do?

Question

Sass

The gulp file looks like this:

var gulp         = require('gulp');
var browserSync  = require('browser-sync').create();
var sass         = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var concatCss    = require('gulp-concat-css');
var ftp          = require('gulp-ftp');

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function()  {

    browserSync.init({
        server: "./src"
    });
   // Следим за изменением файлов
    gulp.watch("src/sass/**/*.sass", ['sass']);
    gulp.watch("src/*.html").on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("src/sass/**/*.sass")
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
        	browsers: ['last 2 versions'],
        	cascade: false
        }))
        .pipe(concatCss("main.css"))
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

gulp.task('ftp', function(){
  return gulp.src('src/**')
          .pipe(ftp({
            host: '',
            user: '',
            pass: '',
            remotePath: ''
        }))
         .pipe(gutil.noop());
});

gulp.task('default', ['serve']);

_variables file (after which the error began to occur):

$text-color-dark: #373737
$text-color-light: #ffffff

What does the import look like in main.sass

@import 'header'
@import 'variables'

And _header.sass:

.header
  &-contacts
    display: flex
    justify-content: flex-end
   &__phone
      font-size: 22px
   &__button
      font-size: 14px
      color: $text-color-light

After including the $text-color-light variable in gulp, this error began to appear:
Error: Undefined variable: "$text-color-light".
on line 9 of src/sass/_header.sass
from line 5 of src/sass/main.sass
>> color: $text-color-light; } } }
How to solve this problem? Please be so kind as to help. Thank you in advance.

Answer 1

Have you tried swapping in main.sass?

@import 'variables'
@import 'header'

In theory, you first need to import the variables.