Компиляция Sass for Foundaiton 6 с использованием Gulp Sass Task Не содержит CSS в сгенерированном файле

Question

Я собрал эту задачу gulp, используя документы, чтобы скомпилировать мое приложение Sass, но, похоже, он не создает никаких файлов Foundation 6 Sass, кроме для исходного комментария в 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)); 
}); 

Что происходит на терминале появляется компилировать дерзость найденную в app.scss без ошибок не бросили:

терминальный выход

$ 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 исходных файлов

// app.scss 

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

.help { 
    color: red; 
} 

Но внутри файла единственное, которое появляется комментарий от верхней части foundation.scss и sourcemap тег:

Составитель 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 */ 

Не добавлять в любой из импорта расположенный в файле. Только комментарий наверху.

Импорт Foundation.scss Файл

/** 
* 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'; 
// ... 

Кто-нибудь знает, почему это происходит? Я могу добавить свои собственные селекторы, и они появляются, но ни один из Foundation 6 не компилируется. У меня есть последний gulp-sass и node-sass через npm.

Answer 1

Вы должны включить все файлы, которые вам нужно скомпилировать в CSS, как это.

@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; 
....