基础6不生成任何样式 我已经建立了一个新的项目来使用GULP和SASS来测试基础6，但是它似乎根本没有编译。还有一篇帖子接近这个主题，但我个人认为，被接受的答案不是正确的解决方案——因为它包含了所有的组件，实际上与Zurb建议的相反（见本期：）。无论如何 我从BoWER安装了基础6.1.1，并在 GulpFrase.js中添加了我的 GULASS 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/')) });

我的

主题.scss

如下：

//vendor file
@import '../bower_components/foundation-sites/scss/settings/settings';
@import '../bower_components/foundation-sites/scss/foundation';

body{
  background: red;
}

编译SCS时，我没有收到任何错误，但是

theme.css

的输出如下所示：

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

// 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';

@import 'foundation';

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

---

因此，由于注释被输出，它出现在文件中，但它没有编译任何代码中的任何一个SASS导入。SCSS

< P>这是发生的，因为在基础6代码> @导入基础< /COD>只导入在您的SCS中使用的基础混合。它是这样设置的，这样你就可以使用组件的基础混合函数，而不增加你的CSS，也可以为这个组件添加股票CSS类。

导入基础CSS类的<>强>所有< /强>，您可以设置主<代码> App.SCSS文件（<代码>主题> SCSs/COD>在您的情况下）类似于：

@导入“设置”；
@进口"基础",；
@导入“运动用户界面”；
@包括一切；
@包括运动ui转换；
@包括运动ui动画；

要仅导入所需组件的单个CSS类，请按如下方式设置

app.scss

文件（

theme.scss

）

@导入“设置”；
@进口"基础",；
@导入“运动用户界面”；
@包括基础全局样式；//始终包括全局样式
@包括基础网格；
@包括基础排版；
@包括基础按钮；
@包括基础形式；
@包括基础能见度等级；
@包括基础浮动类；
@包括基础手风琴；
@包括基础手风琴菜单；
@包括基金会徽章；
@包括基础面包屑；
@包括基础按钮组；
@包括基础详图索引；
@包括基础关闭按钮；
@包括基础向下展开菜单；
@包括基础下拉列表；
@包括基础下拉菜单；
@包括基金会flex视频；
@包括基础标签；
@包括基础媒体对象；
@包括基础菜单；
@包括画布外的基础；
@包括基础轨道；
@包括基础分页；
@包括基础进度条；
@包括基础滑块；
@包括粉底粘；
@包括基础揭示；
@包括基础开关；
@包括基础表；
@包括基础选项卡；
@包括基础缩略图；
@包括基础标题栏；
@包括基础工具提示；
@包括基础顶杆；
@包括运动ui转换；
@包括运动ui动画；

您还需要从

bower\u components/foundation sites/scss/settings/

复制

\u settings.scss

文件，并将其放置在项目的

scss

目录中

最后，确保在

gulpfile.js

中的sass任务中包含这两条路径：

• bower_组件/基础场地/SCS

• bower\u组件/motion ui/src/

---

对于像我这样真正的Zurb新手，以下是我一直在寻找的答案（我只是浪费了几个小时试图找到）
当你安装基础6时，你会得到一个SCSS文件，开始这样的事情：

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

// 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';

@import 'foundation';

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

这将运行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）来启动如下内容：

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

// 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';

@import 'foundation';

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

第一行包括引用所有其他SCSS文件的文件
你可以在会议上得到一份可能包括的事情的清单。它所做的是运行一系列的混入。以下是一个名为“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)}';
  }

@mixin基金会全局样式{
@包括-zf正常化；
//这些样式应用于一个标签，它是由基础JavaScript读取的。
.mq基金会{
字体系列：“#{-zf bp serialize（$breakpoints）}”；
}

---

正是这些混合插件生成了CSS。所有这些对其他人来说都是显而易见的，但对我来说不是！
您使用的是什么版本的Sass？您是否尝试过直接使用Sass而不是使用构建工具来编译它？

npm view node Sass version

为我提供了3.4.2版和

npm view gulp Sass version

gives me 2.1.1（最新版本）@cimmanonSo在这个例子中是

app.scss

实际上是我的文件，

theme.scss

？目前在我的项目中，我没有

app.scss

你是对的。我将更新我的答案以反映这一点。我还添加了一部分关于我忘记的设置文件。你能详细说明一下科林吗？你的意思是说只有标题而没有CSS吗从编译中正常吗？我怎么能得到所有的CSS？我在基础安装页面上找不到任何东西。现在我所有的主要代码是<代码> SCSs/Fund。SCSs<代码>文件> <代码> Boo> <代码>。@ AdththoppsNo.No不正常，您需要<代码> @包括基础所有的< /代码>或<代码> >包括< /COD。e> 在您

@import foundation

获取F