web-dev-qa-db-fra.com

Foundation 6 ne génère aucun style

J'ai mis en place un nouveau projet pour tester Foundation 6 avec Gulp et Sass, mais il ne semble pas compiler du tout. Il y a un autre article proche de ce sujet, mais je pense personnellement que la réponse acceptée n'est pas la bonne solution, car elle inclut tous les composants et constitue en fait le contraire de ce que suggère Zurb (voir ce numéro: https: // github .com/zurb/foundation-sites/issues/7537 ). En tous cas...

J'ai installé Foundation 6.1.1 de bower et ajouté le chemin d'accès à ma fonction gulp-sass dans gulpfile.js comme suit:

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

Mon theme.scss est le suivant:

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

body{
  background: red;
}

Lors de la compilation de mes fichiers scss, je ne reçois aucune erreur, mais la sortie de theme.css ressemble à ceci:

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

Il semble donc qu'il frappe le fichier car le commentaire est sorti mais il ne compile aucune des importations Sass dans foundation.scss.

sasszurb-foundationzurb-foundation-6
18
buschschwick

Cela se produit car dans Foundation 6, @import foundation importe uniquement les mixins Foundation à utiliser dans votre SCSS. Il est configuré de cette manière pour que vous puissiez utiliser les mixins Foundation d'un composant et éviter de surcharger votre CSS en ajoutant également les classes CSS en stock pour ce composant.

Pour importer toutes des classes CSS Foundation, vous pouvez configurer votre fichier app.scss principal (theme.scss dans votre cas) de la manière suivante:

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-everything;

@include motion-ui-transitions;
@include motion-ui-animations;

Pour importer uniquement les classes CSS individuelles des composants dont vous avez besoin, configurez votre fichier app.scss (theme.scss dans votre cas) comme ci-dessous et commentez les composants que vous n'utilisez pas. 

@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;

Vous voudrez également copier le fichier _settings.scss à partir de bower_components/foundation-sites/scss/settings/ et le placer dans le répertoire scss de votre projet.

Enfin, assurez-vous d’inclure ces deux chemins dans la tâche sass dans votre gulpfile.js:

  • bower_components/foundation-sites/scss
  • bower_components/motion-ui/src/
39
Colin Marshall

Pour les vrais débutants de Zurb comme moi, voici la réponse que je cherchais (et que je viens de perdre des heures en essayant de trouver).

Lorsque vous installez Foundation 6, vous vous retrouvez avec un fichier SCSS commençant comme suit:

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

Ceci exécute le code dans les fichiers SCSS pour générer des variables et des mix-ins. Voici un exemple de variable:

$dropdown-padding: 1rem !default;

Voici un exemple de mix-in:

@mixin foundation-typography {
  @include foundation-typography-base;
  @include foundation-typography-helpers;
  @include foundation-text-alignment;
  @include foundation-print-styles;
}

Compiler ceci en CSS ne générera rien de précis. Vous aurez un ensemble de variables que vous pourrez utiliser et un ensemble de mix-ins (fonctions, en gros) que vous pourrez appeler, mais tant que vous ne le ferez pas, vous ne générerez aucun code CSS. La prochaine chose que vous pouvez faire est donc de commenter dans cette ligne:

// Settings
// import your own `settings` here or
// import and modify the default settings through
@import 'settings/settings';

Cependant, vous n'obtiendrez toujours rien car tout ce que vous avez à faire est de définir les valeurs par défaut de vos variables (donc définir les polices, les couleurs, les espacements, etc.). Ce que vous devez faire est de créer un nouveau fichier SCSS (appelons-le test.scss) pour démarrer quelque chose comme ceci:

@import 'foundation';

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

La première ligne inclut le fichier qui référence tous les autres fichiers SCSS. 

Vous pouvez obtenir une liste des éléments à inclure sur le site Zurb ici . Ce que cela fait exécute une série de mix-ins. Voici le début de celui appelé "foundation-global-styles", par exemple, que vous pouvez trouver dans le fichier 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)}';
  }

Ce sont ces mix-ins qui génèrent le CSS. Tout cela était probablement évident pour tout le monde, mais ce n'était pas pour moi!

2
Andy Brown