gulp-sass throw error on file convertion from scss to css

I am trying to convert multiple scss files in to single css file. the main.scss file imports multiple files with variable.scss file as well. when i convert to css file I am getting an error as:

[09:46:00] Using gulpfile ~\722333\Projects\AOS.Core\UI\assets\gulpfile.js [09:46:00] Starting 'styles'... [09:46:00] Finished 'styles' after 25 ms Error in plugin "sass" Message: styles\form.scss Error: Undefined variable: "$color-red". on line 53 of styles/form.scss >> color: $color-red; -----------^ 

how to fix this?

here is my gulp task:

var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('styles', async function () { gulp.src('styles/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(sass({ outputStyle: 'compressed' })) .pipe(gulp.dest('./css/')); }); 

my main.scss file:

@import "variables.scss"; @import "global.scss"; @import "fonts.scss"; //resets;- html, body { padding: 0; margin: 0; height: 100%; font-family: $font-regular, sans-serif; font-size: 0.625rem; color: $text-primary; background: $color-white; }