Foundation 6不會生成任何樣式

Question

我已經設置了一個新項目來使用Gulp和Sass來測試Foundation 6，但它似乎根本無法編譯。還有一篇帖子貼近這個話題，但我個人認爲接受的答案不是正確的解決方案 - 因爲它包含所有的組件，實際上與Zurb建議的相反（參見本期：https://github.com/zurb/foundation-sites/issues/7537）。 反正 ...

我從亭子安裝基金會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只會導入用於SCSS的Foundation mixins。它以這種方式設置，以便您可以使用組件的Foundation mixins，而不是通過爲該組件添加庫存CSS類來膨脹您的CSS。

要導入你可以設置你的主app.scss文件（theme.scss你的情況）類似，本基金CSS類的：

@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目錄。

最後，確保你包括在SASS任務這兩條路徑在你gulpfile.js：

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

Answer 2

對於真正Zurb新手喜歡我，這裏是我的答案尋找（並試圖找到浪費時間）。

當您安裝基金會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處獲得可能包含的東西列表。這是做什麼是運行一系列的混合。這裏的一個名爲「基礎 - 全球風格」，例如，您可以在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。所有這些對其他人都可能是顯而易見的，但這不是我的！