J'ai configuré un nouveau projet pour tester Foundation 6 en utilisant Gulp et Sass mais il ne semble pas du tout compiler. Il existe 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 est en fait le contraire de ce que suggère Zurb (voir ce problème: https://github.com/zurb/foundation-sites/issues/7537 ). Quoi qu'il en soit ...

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

// 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 mon scss, je n'obtiens 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 depuis que le commentaire est sorti mais qu'il ne compile aucune des importations Sass dans foundation.scss.

19
erwstout 31 déc. 2015 à 00:22

2 réponses

Meilleure réponse

Cela se produit parce que dans Foundation 6 @import foundation importe uniquement les mixins Foundation pour une utilisation dans votre SCSS. Il est configuré de cette façon afin que vous puissiez utiliser les mixins Foundation d'un composant et ne pas gonfler votre CSS en ajoutant également les classes CSS de base pour ce composant.

Pour importer toutes les classes CSS Foundation, vous pouvez configurer votre fichier principal app.scss (theme.scss dans votre cas) semblable à celui-ci:

@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 pour les 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 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 de votre gulpfile.js:

  • bower_components/foundation-sites/scss
  • bower_components/motion-ui/src/
40
Colin Marshall 25 janv. 2016 à 22:52

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

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

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

Cela 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 cela en CSS ne générera précisément rien. Vous aurez un ensemble de variables que vous pourrez utiliser, et un ensemble de mix-ins (fonctions, essentiellement) que vous pourrez appeler, mais tant que vous ne le faites pas, vous ne générerez aucun CSS. Donc, la prochaine chose que vous pourriez faire est 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 cela ne fait que définir des valeurs par défaut pour 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 comprend le fichier qui référence tous les autres fichiers SCSS.

Vous pouvez obtenir une liste des éléments possibles à inclure sur le site Zurb ici. Ce que cela fait, c'est exécuter 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!

4
Andy Brown 20 sept. 2017 à 10:44