使用 Gulp Sass 任务为 Foundaiton 6 编译 Sass 在生成的文件中没有提供 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 中找到的 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

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 的 none 会被编译。我通过 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;
....

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

Compiling Sass for Foundaiton 6 using Gulp Sass Task Provides No CSS in Generated File

sass

zurb-foundation

node-sass

gulp-sass

zurb-foundation-6