Фонд 6 не генерирует никаких стилей

Question

У меня есть новый проект для тестирования Foundation 6 с использованием Gulp и Sass, но он вообще не компилируется. Существует еще одно сообщение, близкое к этой теме, но я лично считаю, что принятый ответ не является правильным решением - так как он включает в себя все компоненты и на самом деле является противоположным тому, что предлагает Зурб (см. Этот вопрос: https://github.com/zurb/foundation-sites/issues/7537). Во всяком случае ...

Я установил Фонд 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; 
} 

Таким образом, кажется, что он попадает в файл с момента вывода комментария, но не компилирует любой импорт Sass в foundation.scss.

Answer 1

Это происходит потому, что в Foundation 6 @import foundation импортирует только микшионы Foundation для использования в вашем SCSS. Он настроен таким образом, чтобы вы могли использовать компоненты микширования компонента и не раздувать свой 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; 

Вы также хотите, чтобы скопировать файл _settings.scss из bower_components/foundation-sites/scss/settings/ и поместить его в scss директории вашего проекта.

Наконец, убедитесь, что вы включили эти два пути в задаче Сасс в вашем gulpfile.js:

• 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. Что это значит, это запустить ряд микс-инков. Вот начало одного называемых «фундаментные глобальной-стилями», к примеру, который вы можете найти в файле 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. Все это, вероятно, было очевидно для всех остальных, но это было не для меня!