sass - resueltos - Fundación 6 no genera ningún estilo.

estadística elemental johnson r

Question

He configurado un nuevo proyecto para probar Foundation 6 utilizando Gulp y Sass, pero no parece compilar en absoluto. Hay otra publicación cercana a este tema, pero personalmente creo que la respuesta aceptada no es la solución correcta, ya que incluye todos los componentes y en realidad es lo opuesto a lo que sugiere Zurb (consulte este tema: https://github.com/zurb/foundation-sites/issues/7537 ). De todos modos

Instalé Foundation 6.1.1 desde Bower y agregué la ruta a mi función gulp-sass en gulpfile.js así:

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

Mi theme.scss es el siguiente:

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

body{
  background: red;
}

Al compilar mi scss no obtengo errores, pero la salida de theme.css ve así:

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

Entonces parece que está golpeando el archivo ya que el comentario se envía pero no compila ninguna de las importaciones de Sass en foundation.scss .

Answer 1

Esto está ocurriendo porque en Foundation 6 @import foundation solo importa los mixins de Foundation para usarlos en su SCSS. Se configura de esta manera para que pueda utilizar los mixins de Foundation de un componente y no inflar su CSS al agregar las clases de CSS de ese componente.

Para importar todas las clases de Foundation CSS, puede configurar su archivo principal app.scss ( theme.scss en su caso) similar a esto:

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

@include foundation-everything;

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

Para importar solo las clases CSS individuales para los componentes que necesita, configure su archivo theme.scss ( theme.scss en su caso) como se muestra a continuación, y comente los componentes que no usa.

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

También querrá copiar el archivo _settings.scss de bower_components/foundation-sites/scss/settings/ y colocarlo en el directorio scss su proyecto.

Finalmente, asegúrese de incluir estas dos rutas en la tarea sass en su gulpfile.js :

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

Answer 2

Para los verdaderos novatos de Zurb como yo, esta es la respuesta que estaba buscando (y solo he perdido horas tratando de encontrarla).

Cuando instala Foundation 6, termina con un archivo SCSS que comienza algo así:

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

Esto ejecuta el código en los archivos SCSS para generar variables y combinaciones. Aquí hay un ejemplo de una variable:

$dropdown-padding: 1rem !default;

Aquí hay un ejemplo de un mix-in:

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

Compilar esto en CSS no generará precisamente nada. Tendrá un conjunto de variables que podría usar, y un conjunto de combinaciones (funciones, básicamente) a las que podría llamar, pero hasta que lo haga, no generará ningún CSS. Así que lo siguiente que podrías hacer es comentar de nuevo en esta línea:

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

Sin embargo, aún no obtendrá nada, porque todo lo que hace es establecer valores predeterminados para sus variables (para configurar fuentes, colores, espaciados, etc.). Lo que debes hacer es crear un nuevo archivo SCSS (llamémoslo test.scss) para comenzar algo como esto:

@import ''foundation'';

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

La primera línea incluye el archivo que hace referencia a todos los demás archivos SCSS.

Puede obtener una lista de posibles cosas para incluir en el sitio de Zurb aquí . Lo que esto está haciendo es ejecutar una serie de mezclas. Aquí está el comienzo de uno llamado "foundation-global-styles", por ejemplo, que puede encontrar en el archivo 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)}'';
  }

Son estos mix-ins los que generan el CSS. Todo esto probablemente fue obvio para todos los demás, ¡pero no lo fue para mí!