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

Question

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;
}

Answer 1

In Short:

Partials' filenames should start with an underscore.

Rename partials to _variables.scss , _global.scss , _fonts.scss and update main.scss to:

@import "variables";
@import "global";
@import "fonts";

Full explanation:

The build is failing because sass is trying to compile form.scss as form.css and can't find reference to $color-red .

From Sass-Lang.com:

As a convention, Sass files that are only meant to be imported, not compiled on their own, begin with _ (as in _code.scss ). These are called partials, and they tell Sass tools not to try to compile those files on their own. You can leave off the _ when importing a partial.

https://sass-lang.com/documentation/at-rules/import#partials