Kompilieren von Sass für Foundaiton 6 mit Gulp Sass Aufgabe stellt kein CSS in generierter Datei bereit

Question

Ich habe diese Schluckaufgabe mit Hilfe der Dokumentation zusammengestellt, um meine Anwendung Sass zu kompilieren, aber es scheint keine der Foundation 6 Sass-Dateien außer zu erstellen für den ersten Kommentar in foundation.scss.

// gulp task 

'use strict'; 

var path = require('path'); 

var gulp = require('gulp'); 

var sass = require('gulp-sass'); 

var config = require('./../config.js'); 
var helpers = require('./../helpers.js'); 

gulp.task('sass', ['clean-styles'], function() { 

    helpers.log('Compile Sass'); 

    var source = path.join(
     config.assetsPath, // <-- 'assets/js' 
     config.css.sass.folder, // <-- 'sass' 
     '**/*.scss' 
    ); 

    var outputFolder = path.join(
     config.publicPath, // <-- 'public' 
     config.css.outputFolder // <-- 'css' 
    ); 

    return gulp.src(source) 
       .pipe(
        sass(config.css.sass.pluginOptions) 
         .on('error', sass.logError) 
       ) 
       .pipe(gulp.dest(outputFolder)); 
}); 

die vom Terminal gehen scheint, die sass in app.scss gefunden zu kompilieren mit keine Fehler ausgelöst:

Terminal-Ausgang

$ gulp sass 
[00:08:41] Using gulpfile D:\projects\app\gulpfile.js 
[00:08:41] Starting 'clean-styles'... 
[00:08:41] Clean Styles 
[00:08:41] D:\projects\app\public\css\app.css 
D:\projects\app\public\css\app.css.map 
[00:08:41] Finished 'clean-styles' after 23 ms 
[00:08:41] Starting 'sass'... 
[00:08:41] Compile Sass 
[00:08:41] Finished 'sass' after 215 ms 

Sass Quelldateien

// app.scss 

// -------------------------------------------------------------------------- 
// Core Foundation Imports 
// -------------------------------------------------------------------------- 
@import "../../../public/vendors/foundation-sites/scss/foundation"; 

.help { 
    color: red; 
} 

Aber in der das einzige, was Datei, die der Kommentar von der Spitze der foundation.scss und dem sourcemap Tag erscheint, ist:

Zusammengestellt CSS

// app.css 

/** 
* Foundation for Sites by ZURB 
* Version 6.2.1 
* foundation.zurb.com 
* Licensed under MIT Open Source 
*/ 
.help { 
    color: red; 
} 

/*# sourceMappingURL=app.css.map */ 

in einem der Importe nicht hinzufügen in der Datei befindet. Nur der Kommentar an der Spitze. Importe

Foundation.scss Datei

/** 
* Foundation for Sites by ZURB 
* Version 6.2.1 
* foundation.zurb.com 
* Licensed under MIT Open Source 
*/ 

// Sass utilities 
@import 'util/util'; 

// Global variables and styles 
@import 'global'; 

// Components 
@import 'grid/grid'; 
@import 'typography/typography'; 
@import 'forms/forms'; 
@import 'components/visibility'; 
@import 'components/float'; 
@import 'components/button'; 
@import 'components/button-group'; 
@import 'components/accordion-menu'; 
@import 'components/accordion'; 
@import 'components/badge'; 
// ... 

Wer weiß, warum dies geschieht? Ich kann meine eigenen Selektoren hinzufügen und sie werden angezeigt, aber keiner von Foundation 6 ist kompiliert. Ich habe den neuesten Schluck-Sass und Knoten-Sass über Npm.

Answer 1

Sie müssen alle Dateien, die Sie kompilieren müssen, wie folgt in CSS einbinden.

@include foundation-global-styles; 
@include foundation-flex-grid; 
@include foundation-typography; 
@include foundation-button; 
@include foundation-forms; 
@include foundation-accordion; 
@include foundation-accordion-menu; 
@include foundation-badge; 
@include foundation-breadcrumbs; 
@include foundation-button-group; 
@include foundation-callout; 
@include foundation-close-button; 
....