Question

我正面临与Gulp编译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-header.scss
SASS /全局/ _typos.scss

对于gulp-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在这些文件夹之外; 希望这会起作用

Gulp sass编译问题

1 个答案: