sass - Foundation 6不生成任何样式

Question

我已经建立了一个新项目来使用Gulp和Sass测试Foundation 6，但它似乎根本没有编译。还有一个与此主题相关的帖子，但是我个人认为，被接受的答案不是正确的解决方案-因为它包含所有组件，并且实际上与Zurb建议的相反(请参阅此问题:https://github.com/zurb/foundation-sites/issues/7537)。无论如何...

我从bower安装了Foundation 6.1.1，然后将路径添加到gulp-sass中的gulpfile.js函数中，如下所示:

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('scss/theme.scss')
        .pipe(sass({ includePaths : ['bower_components/foundation-sites/scss'], outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(gulp.dest('css/'))
});

我的 theme.scss如下:

//vendor file
@import '../bower_components/foundation-sites/scss/settings/settings';
@import '../bower_components/foundation-sites/scss/foundation';

body{
  background: red;
}

编译我的scss时，没有任何错误，但是 theme.css的输出如下所示:

/**
 * Foundation for Sites by ZURB
 * Version 6.1.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
body {
  background: red;
}

因此，由于已输出注释，因此似乎正在命中该文件，但未在 foundation.scss中编译任何Sass导入。

Answer 1

之所以发生这种情况，是因为在Foundation 6中，@import foundation仅导入Foundation混合以便在您的SCSS中使用。通过这种方式进行设置，这样您就可以使用组件的Foundation mixins，而不必通过为该组件添加库存CSS类来膨胀CSS。

要导入Foundation CSS类的所有的，您可以设置类似于以下内容的主要app.scss文件(在您的情况下为theme.scss):

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-everything;

@include motion-ui-transitions;
@include motion-ui-animations;

要仅为所需组件导入单个CSS类，请按如下所示设置app.scss文件(在您的情况下为theme.scss)，然后注释掉不使用的组件。

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-global-styles; // Always include the global-styles
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;

@include motion-ui-transitions;
@include motion-ui-animations;

您还需要从_settings.scss复制bower_components/foundation-sites/scss/settings/文件，并将其放置在项目的scss目录中。

最后，确保在gulpfile.js的sass任务中包括这两个路径:

bower_components/foundation-sites/scss

bower_components/motion-ui/src/