Gulp выдает ошибку при компиляции sass, после подключения переменной. Error: Undefined variable: «$text-color-light». Что делать?

Question

[Kosmich23]

Файл gulp выглядит следующим образом:

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 (после которого и стала возникать ошибка):

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

Как выглядит импорт в main.sass

@import 'header'
@import 'variables'

И _header.sass:

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

После подключения переменной $text-color-light в gulp стала возникать данная ошибка:
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; } } }

Как решить данную проблему? Будьте так добры помочь. Заранее благодарю.

Comments

[Kosmich23]

Если же убрать @impоrt 'variables', то снова все компилируется, но gulp выдает ошибку уже такого типа:
expecting another url or quoted path in @impоrt list

Answer 1

[Sagrana]

А вы не пробовали поменять местами в main.sass?

@import 'variables'
@import 'header'

По идее, сначала надо переменные импортировать.

Comments

[Kosmich23]

Пробовал, все равно возникает ошибка

Error in plugin "sass"
Message:
    src\sass\main.sass
Error: File to import not found or unreadable: header.
        on line 6 of src/sass/main.sass
>> @import 'header';