Foundation 6不会生成任何样式

Question

我已经设置了一个新项目来使用Gulp和Sass测试Foundation 6,但它似乎根本没有编译.还有另一篇文章接近这个主题,但我个人认为接受的答案不是正确的解决方案 - 因为它包含了所有组件,实际上与Zurb建议的相反(参见此问题:https://github.com/zurb/foundation-sites/issues/7537).无论如何 ......

我从凉亭安装了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;
}

所以看起来它正在击中文件,因为评论输出但它没有编译任何Sass导入foundation.scss.

Answer 1

发生这种情况是因为在Foundation 6中@import foundation只导入了用于SCSS的Foundation mixins.它是这样设置的,这样你就可以使用组件的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:

• bower_components/foundation-sites/scss
• bower_components/motion-ui/src/