Fondotinta 6 non genera alcuno stile

Question

Ho impostato un nuovo progetto per testare Foundation 6 usando Gulp e Sass ma non sembra per niente compilato. C'è un altro post vicino a questo argomento, ma personalmente ritengo che la risposta accettata non sia la soluzione corretta, poiché include tutti i componenti ed è in realtà l'opposto di ciò che suggerisce Zurb (vedere questo numero: https://github.com/zurb/foundation-sites/issues/7537). Comunque ...

ho installato Fondazione 6.1.1 da pergolato, e ha aggiunto il percorso per la mia funzione gulp-sass in gulpfile.js in questo modo:

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

mio theme.scss è la seguente:

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

body{ 
    background: red; 
} 

Durante la compilazione del mio scss non ottengo errori, ma l'output di theme.css è simile al seguente:

Quindi sembra che stia colpendo il file da quando il commento è stato emesso ma non sta compilando nessuna delle importazioni Sass in foundation.scss.

Answer 1

Questo sta accadendo perché in Foundation 6 @import foundation importa solo i mixin Foundation da utilizzare nel SCSS. È configurato in questo modo in modo che tu possa utilizzare i mixin di Foundation di un componente e non gonfiare il tuo CSS aggiungendo anche le classi CSS originali per quel componente.

Per importare tutte delle classi Fondazione CSS che potete configurare il principale app.scss di file (theme.scss nel tuo caso) simile a questo:

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

@include foundation-everything; 

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

Per importare solo le singole classi CSS per i componenti necessari , imposta il tuo file app.scss (theme.scss nel tuo caso) come di seguito, e commenta i componenti che non usi.

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

vorrete anche per copiare il file _settings.scss da bower_components/foundation-sites/scss/settings/ e posizionarlo nella directory del progetto scss.

Infine, assicurarsi di includere questi due percorsi nel compito sass nel gulpfile.js:

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

Answer 2

Per i veri neofiti ZURB come me, ecco la risposta che ero cercando (e ho appena perso ore cercando di trovare).

Quando si installa Fondazione 6, si finisce con un file SCSS iniziare qualcosa di simile:

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

Questo viene eseguito il codice nei file SCSS per generare variabili e mix-ins.Ecco un esempio di una variabile:

$dropdown-padding: 1rem !default; 

Ecco un esempio di un mix-in:

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

Compilare questo in CSS genererà proprio nulla. Avrai un insieme di variabili che potresti usare e un insieme di mix-in (funzioni, in pratica) che potresti chiamare, ma fino a farlo non genererai alcun CSS. Così la prossima cosa che potreste fare è commentare di nuovo in questa linea:

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

Tuttavia, ci si può comunque ottenere nulla, perché tutto questo fa è per impostare i valori predefiniti per le variabili (quindi di impostazione caratteri, colori, spaziature , eccetera). Quello che dovete fare è quello di creare un nuovo file SCSS (chiamiamolo test.scss) per avviare qualcosa di simile:

@import 'foundation'; 

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

La prima riga include il file che fa riferimento tutti gli altri file SCSS.

È possibile ottenere un elenco di possibili cose da includere allo Zurb site here. Ciò che sta facendo è eseguire una serie di missaggi. Ecco l'inizio di quello chiamato "fondazione-global-stili", per esempio, che è possibile trovare nel file 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)}'; 
    } 

Sono questi mix-ins che generano il CSS. Tutto questo era probabilmente ovvio per tutti gli altri, ma non era per me!