Gulp sass汇编问题

我在使用Gulp编译Sass时遇到了一个问题。我在一个文件中定义的一些变量，_typos.scss，像这样：Gulp sass汇编问题

$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/LA YOUT/_layout-header.scss
SASS /全球/ _typos.scss

是它一饮而尽，青菜的问题吗？这不是罗盘。

谢谢编辑：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" 
    },

来源

2017-05-03 webmaster pf

您还可以发布您正在执行所有其他sass文件的'@ import'的文件吗？ –

定义是否放置在名为_ \ _ typos.scss_或_typos.scss_的文件中？如果它在一个名为_typos.scss_的文件中，那就是你的错误所在，因为你将其中一个包含下划线。 – osynligsebastian

文件名是''_typos.scss'' –

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

来源

2017-09-11 07:26:19

Gulp sass汇编问题

回答

相关问题