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

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

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

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

ОТВЕТЫ

Ответ 1

Это происходит потому, что в Foundation 6 @import foundation импортируются только микшионы Foundation для использования в вашем SCSS. Он настраивается таким образом, чтобы вы могли использовать компонентные микшионы Foundation, а не надувать свой CSS, добавляя также классы CSS для этого компонента.

Чтобы импортировать все из классов CSS 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.

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

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

Ответ 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 здесь. Что это значит, это запустить ряд микс-инков. Здесь, например, начало того, что называется "base-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. Все это, вероятно, было очевидно для всех остальных, но это было не для меня!