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

任何人都知道为什么会这样吗？我可以添加我自己的选择器并显示它们，但是没有编译基础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;
....

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

1 个答案: