Foundation 6 不生成任何样式 [英] Foundation 6 does not generate any styles

问题描述

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

I have setup a new project to test Foundation 6 using Gulp and Sass but it doesn't seem to compile at all. There is another post close to this topic, but I personally believe the accepted answer is not the correct solution - as it includes all of the components and is actually the opposite of what Zurb suggests (see this issue: https://github.com/zurb/foundation-sites/issues/7537). Anyway...

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

I installed Foundation 6.1.1 from bower, and added the path to my gulp-sass function in gulpfile.js like so:

// 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 的输出看起来像这样:

When compiling my scss I get no errors, but the output of theme.css looks like this:

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

所以它似乎正在击中文件，因为注释被输出，但它没有编译 foundation.scss 中的任何 Sass 导入.

So it appears it is hitting the file since the comment is outputted but its not compiling any of the Sass imports in foundation.scss.

推荐答案

发生这种情况是因为在 Foundation 6 @importfoundation 中仅导入 Foundation mixin 以在您的 SCSS 中使用.它是这样设置的，这样您就可以使用组件的 Foundation mixins，而不会通过为该组件添加库存 CSS 类来膨胀您的 CSS.

This is happening because in Foundation 6 @import foundation only imports the Foundation mixins for use in your SCSS. It's setup this way so that you can use a component's Foundation mixins and not bloat your CSS by also adding the stock CSS classes for that component.

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

To import all of the Foundation CSS classes you can setup your main app.scss file (theme.scss in your case) similar to this:

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

@include foundation-everything;

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

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

To import only the individual CSS classes for the components you need, setup your app.scss file (theme.scss in your case) like below, and comment out the components you don't use.

@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 目录.

You will also want to copy the _settings.scss file from bower_components/foundation-sites/scss/settings/ and place it in your project's scss directory.

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

Finally, make sure you include these two paths in the sass task in your gulpfile.js:

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

这篇关于Foundation 6 不生成任何样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！