Gulp sass compilation issues - sass

Question

I'm facing an issue on Sass compilation with Gulp.
I've some variables defined in a file, _typos.scss, like this:
$AristaFont : "Arista", Trebuchet MS, sans-serif;
And when I use this variable in another file,_layout_header.scss, Gulp say the variable is not defined:
[gulp-sass] sass/layout/_layout-header.scssError: Undefined variable: "$AristaFont".
on line 107 of sass/layout/_layout-header.scss
These files are located in different folder like:
sass/layout/_layout-header.scss
sass/global/_typos.scss
Is it a problem for gulp-sass ? It wasn't with compass.
Thanks
EDIT: an excerpt of the application.scss witch import all scss files.
#import "global/_typos.scss";
#import "global/_style.scss";
#import "global/_flex.scss";
#import "global/_stacktable.scss";
/*#import "global/sub-nav";*/
// Import des partiels du layout du thème Drupal
#import "layout/_layout.scss";
#import "layout/_layout-nodes.scss";
#import "layout/_layout-nodes-flexbox.scss";
#import "layout/_layout-header.scss";
#import "layout/_layout-footer.scss";
My package.json excerpt:
"devDependencies": {
"event-stream": "^3.3.4",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-load-plugins": "^1.5.0",
"gulp-notify": "^3.0.0",
"gulp-sass": "^3.1.0",
"gulp-shell": "^0.6.3",
"gulp-size": "^2.1.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-util": "^3.0.8",
"node-sass-import-once": "^1.2.0",
"notify-send": "^0.1.2",
"typey": "^1.1.1"
},

Answer 1

please use this way:
in gulpfile.js file use this code:
//////////////////////////////////////////
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
/**
--Top level function--
gulp.task = Define task
gulp.src = Point topfiles to use
gulp.dest = Points to folder to output
gulp.watch = watch files and folder for change
**/
//Log message
gulp.task('message', () =>
console.log("gulp is running... ")
);
//optimise images
gulp.task('imageMin', () =>
gulp.src("images/**/*")
.pipe(imagemin())
.pipe(gulp.dest("img_min"))
);
//compile sass
gulp.task('sass',() =>
gulp.src("sass/**/*.scss")
.pipe(sass().on('error',sass.logError))
.pipe(gulp.dest("css"))
);
//concatinate and minify js
gulp.task('script',()=>
gulp.src("js/**/*.js")
.pipe(concat("script.js"))
.pipe(uglify())
.pipe(gulp.dest("js"))
);
//all task in this file
gulp.task('default',['message', 'imageMin', 'sass', 'script']);
//watch command
gulp.task('watch', ['message', 'imageMin', 'sass', 'script'], function() {
gulp.watch("images/**/*",['imageMin']);
gulp.watch("sass/**/*.scss",['sass']);
gulp.watch("js/**/*.js",['script']);
});
/////////////////////////////////////////////////////
after that in your_main_sass_file.scss use this
#import "abstractions/**/*";
#import "variables/**/*";
#import "base/**/*";
#import "layout/**/*";
#import "components/**/*";
where abstraction,variables,base,layout,components are the folder inside the sass folder all of them contain different .scss partial files
and your_main_sass_file.scss is outside these folders;
hope this will work