使用Gulp Sass编译Foundaiton 6的Sass任务在生成的文件中提供没有CSS

Question

我使用文档编译了我的应用程序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发现SASS与抛出没有任何错误：

端子输出

$ 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 

萨斯源文件

// 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。我通过npm获得了最新的gulp-sass和node-sass。

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