Foundation 6 不生成任何样式

Question

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

我从 bower 安装了 Foundation 6.1.1，并在 gulpfile.js 中添加了我的 gulp-sass 函数的路径，如下所示：

// 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 mixin 以供您的 SCSS 使用。它以这种方式设置，以便您可以使用组件的 Foundation mixin，而不是通过为该组件添加库存 CSS 类来膨胀您的 CSS。

要导入基金会所有 CSS 类，您可以在您的 app.scss 主文件中设置主 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;

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

最后，确保将这两条路径包含在 gulpfile.js 的 sass 任务中：

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

Answer 2

对于像我这样真正的 Zurb 新手，这里是我一直在寻找的答案（并且刚刚浪费了几个小时试图找到）。

当您安装 Foundation 6 时，您最终会得到一个 SCSS 文件，其开头如下所示：

// Dependencies
@import '../_vendor/normalize-scss/sass/normalize';  
@import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies'; 
@import '../_vendor/sassy-lists/stylesheets/helpers/true';
@import '../_vendor/sassy-lists/stylesheets/functions/purge';
@import '../_vendor/sassy-lists/stylesheets/functions/remove';
@import '../_vendor/sassy-lists/stylesheets/functions/replace';
@import '../_vendor/sassy-lists/stylesheets/functions/to-list';

// Settings
// import your own `settings` here or
// import and modify the default settings through
@import 'settings/settings';

这会运行 SCSS 文件中的代码以生成变量和混入。这是一个变量的例子：

$dropdown-padding: 1rem !default;

这是一个混合示例：

@mixin foundation-typography {
  @include foundation-typography-base;
  @include foundation-typography-helpers;
  @include foundation-text-alignment;
  @include foundation-print-styles;
}

将其编译成 CSS 将不会生成任何内容。您将拥有一组可以使用的变量，以及一组可以调用的混入（基本上是函数），但是在您这样做之前，您不会生成任何 CSS。所以接下来你可以做的是在这一行中回复评论：

// Settings
// import your own `settings` here or
// import and modify the default settings through
@import 'settings/settings';

但是，您仍然什么也得不到，因为这只是为您的变量设置默认值（因此设置字体、颜色、间距等）。你需要做的是创建一个新的 SCSS 文件（我们称它为 test.scss）来开始这样的事情：

@import 'foundation';

@include foundation-global-styles;
@include foundation-xy-grid-classes;

第一行包含引用所有其他 SCSS 文件的文件。

您可以在 Zurb site here 中获得可能包含的内容列表。这是在做运行一系列的混入。例如，这是名为 "foundation-global-styles" 的文件的开头，您可以在 global.scss 文件中找到它：

@mixin foundation-global-styles {
  @include -zf-normalize;

  // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
  .foundation-mq {
    font-family: '#{-zf-bp-serialize($breakpoints)}';
  }

正是这些混音生成了 CSS。所有这一切对其他人来说可能是显而易见的，但对我来说却不是！

Foundation 6 不生成任何样式

Foundation 6 does not generate any styles

sass

zurb-foundation

zurb-foundation-6