Gulp sassコンパイルの問題

Question

私はGulpでSassコンパイルに関する問題に直面しています。 私はこのように、ファイルに定義されているいくつかの変数、_typos.scssをしました：

$AristaFont : "Arista", Trebuchet MS, sans-serif; 

そして、私は別のファイル、_layout_header.scssでこの変数を使用する場合、ガルプは、変数が定義されていないと言います：

[gulp-sass] sass/layout/_layout-header.scssError: Undefined variable: "$AristaFont". 
     on line 107 of sass/layout/_layout-header.scss 

のようにこれらのファイルを別のフォルダに配置されています

• SASS /ラYOUT/_layout-header.scss
• SASS// _typos.scss

それは一口-SASSのための問題であり、グローバルな？コンパスではありませんでした。

ありがとう 編集：application.scssの抜粋は、すべてのscssファイルをインポートします。

@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"; 

マイpackage.jsonの抜粋：

"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 

とyour_main_sass_file.scssこれらのフォルダの外にあります。 これがうまくいきたいです