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;
}

所以它似乎是在点击文件，因为评论已输出，但它没有编译foundation.scss中的任何Sass导入。

Answer 1

这种情况正在发生，因为在Foundation 6 @import foundation中只导入Foundation mixins以在SCSS中使用。它以这种方式设置，以便您可以使用组件的基础混合，而不是通过添加该组件的库存CSS类来膨胀您的CSS。

要导入基础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/

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不会生成任何样式

2 个答案: