Gulp sass编译问题

我正面临一个关于Sass编译的问题。 我在文件_typos.scss中定义了一些变量，如下所示：

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

当我在另一个文件中使用这个变量时，_layout_header.scss，Gulp说这个变量没有定义：

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

这些文件位于不同的文件夹中，如：

• sass/layout/_layout-header.scss
• sass/global/_typos.scss

这对大口大喝是个问题吗？不是用指南针

谢谢 编辑：导入所有scss文件的application.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";

My 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"
  },

并且您的_main_sass_file.scs位于这些文件夹之外；

---

希望这能起作用

您是否也可以发布您在其中执行所有其他sass文件的

@import

？定义是否放在名为_typos.scss或typos.scss的文件中？如果它位于名为typos.scss的文件中，这就是错误所在，因为其中包含一个带有下划线的文件。文件名为

\u typos.scss

我需要手动安装libsass吗？因为gulp sass将节点sass作为依赖项安装，但我没有libass节点模块。请参阅编辑。您解决了这个问题吗？你有没有试过用新的现代方式进口@导入“全局/打字错误”-即使文件前面有下划线。没有SCSSI是3号还是4号？因为我实际上使用的是Gulp3，我没有时间更新代码来使用Gulp4。

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