Foundation 6 不生成任何样式

Question

我已经设置了一个新项目来使用 Gulp 和 Sass 测试 Foundation 6，但它似乎根本无法编译。还有另一篇接近这个主题的帖子，但我个人认为接受的答案不是正确的解决方案 - 因为它包含所有组件，实际上与 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 混入以用于您的 SCSS。以这种方式设置，以便您可以使用组件的 Foundation mixin，而不会通过为该组件添加股票 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;

您还需要从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。所有这一切可能对其他人来说都是显而易见的，但对我来说却不是！