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彙編問題

回答

相關問題