Foundation 6 不生成任何样式

Posted 2023-03-07

【中文标题】Foundation 6 不生成任何样式

【英文标题】：Foundation 6 does not generate any styles

【发布时间】：2016-04-04 21:28:26

【问题描述】：

我已经设置了一个新项目来使用 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 导入。

【问题讨论】：

你用什么版本的 Sass 编译？您是否尝试过直接使用 Sass 编译它，而不是使用构建工具？

npm view node-sass version 给我 3.4.2 和 npm view gulp-sass version 给我 2.1.1（最新）@cimmanon

【参考方案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/

【讨论】：

所以在这种情况下app.scss实际上是我的文件theme.scss？目前在我的项目中我没有app.scss

你是对的。我将更新我的答案以反映这一点。我还添加了关于我忘记的设置文件的部分。

你能详细说明一下科林吗？您的意思是编译时只获取标题而没有CSS是正常的吗？我怎样才能得到所有的CSS？我在 Foundation 安装页面上找不到任何东西。现在我只有@import 用于来自bower 的主要scss/foundation.scss 文件。

@AdamThompson 不，这不正常，您需要 @include foundation-everything 或 @include @import foundation 之后的各个组件才能获得 Foundation CSS。导入 foundation.scss 只会导入 mixins，因此您可以将 Foundations 组件与您自己的自定义 CSS 类一起使用。

@Daskul 设置您的导入路径，如本答案末尾所述。

【参考方案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。所有这一切可能对其他人来说都是显而易见的，但对我来说却不是！