Gulp-sass nie kompiluje Foundation 6 poprawnie

Question

Mam pewne problemy z plikami Foundation 6, z pewnych powodów po prostu nie zawierają wszystkich składników sass. Próbowałem użyć Foundation 5 i działało dobrze.

Oto moje zadanie łyk:

gulp.task('styles', ['clearCss'], function() { 
    gulp.src('assets/sass/app.scss') 
     .pipe(plumber(plumberErrorHandler)) 
     .pipe(sourcemaps.init()) 
     .pipe(sass({ 
      outputStyle: 'compressed' 
     }) 
     .on('error', notify.onError(function(error) { 
      return "Error: " + error.message; 
     })) 
     ) 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions', 'ie >= 9'] 
     })) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('./assets/dist/css')) 
     .pipe(browserSync.stream({match: '**/*.css'})) 
     .pipe(notify({ 
      message: "Styles task complete!" 
     })); 
}); 

I tu jest moje app.scss:

// Import Foundation 
@import "../components/foundation/scss/foundation"; 

Współpracuje z własnymi plikami Sass, ale całkowicie ignorując części fundamentu.

Answer 1

Powinieneś zaimportować plik foundation-sites.scss, a nie scss/foundation.scss. foundation.scss plik ma tylko @mixin Foundation wszystko które wliczone jest w Foundation sites.scss:

@include foundation-everything; 

Jednak fundamentem-sites.scss ma błąd w 6.0.4, to jest mój dziennik:

Error in plugin 'sass' 
Message: 
    bower_components\foundation-sites\foundation-sites.scss 
Error: File to import not found or unreadable: foundation 
     Parent style sheet: stdin 
     on line 1 of stdin 
>> @import 'foundation'; 

Rozwiązaniem:

Zmień linia nr 1 w pliku Foundation sites.scss z @import 'foundation'; do @import 'scss/foundation';

Answer 2

Musiałem edytować plik bower.json w witrynie fundamentów, aby zmienić fundament @ support na main.scss.

Od:

"main": [ 
    "scss/foundation.scss", 
    "js/foundation.js" 
], 

Do:

"main": [ 
    "foundation-sites.scss", 
    "js/foundation.js" 
    ], 

jak również pliku fundacja-sites.scss.

@import 'foundation'; 

Do:

@import 'scss/foundation.scss'; 

Nie sądzę, jest to najlepsza droga do podjęcia, ale mój Sass, grunt i altana wiedza jest ograniczona.

Answer 3

Co zrobiłem z moim haustem + altana Setup: /src/scss/app.scss @import 'settings'; @import '../../bower_components/foundation-sites/scss/foundation'; @include foundation-everything; settings.scss zawartych mój fundamentowe zmienne Zastąpienia niestandardowy CSS itd trick mnie było @import pełnej ścieżki pliku następnie @include wstawka.

Choć wszystko jest przesadnie obfite, wolę rozwijać się bez problemów, a następnie użyć uncss do usunięcia martwego kodu CSS.

Answer 4

mam łykać-Sass pracy z Foundation (Fundacja 6 stron):

Mój plik main.scss:

@charset 'UTF-8'; 
/** 
* Main SCSS 
* Version 1.0.0 
* built with foundation-sites 
*/ 

// import custom settings 
@import 'settings'; 

// import foundation sass 
@import "../bower_components/foundation-sites/scss/foundation"; 

/* either include all foundation components… //*/ 
@include foundation-everything; 

/* or include specific foundation components //*/ 
// @include foundation-global-styles; 
    /* include either foundation-grid… //*/ 
// @include foundation-grid; 
    /* or foundation-flex-grid (but don't include both) //*/ 
// @include foundation-flex-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; 

Jeśli nie chcesz, aby załadować wszystkie componenents fundamentowych, ty nie musisz.Zamiast @include foundation-everything, po prostu @include konkretnych składników, których potrzebujesz.

Answer 5

prawidłowe podejście do fundamentu 6:

Jeśli spojrzeć na plik foundation.scss (https://github.com/zurb/foundation-sites-6/blob/develop/scss/foundation.scss)

Tak importuje wszystkie wymagane komponenty, ale ponieważ są one teraz wstawek i nie regularne sass musisz wyraźnie powiedzieć, że chcesz ich użyć, po prostu wywołując mixin.

app.scss

@import 'foundation'; 
@include foundation-everything; // Very important if you want to include all of foundation css to your complied css 

gulpfile.js

gulp.task('scss', function() { 
    return gulp.src('app.scss') 
     .pipe(plugins.sass(
      {includePaths: ['./node_modules/foundation-sites/scss']} 
     )) 
     .pipe(gulp.dest('css')) 
     .pipe(plugins.notify({ message: 'Sass task complete' })); 
}); 

Answer 6

Jeśli masz gulpfile, m.in. 'node_modules/Foundation sites/SCSS', a następnie w swojej aplikacji. scss lub style.scss wykonaj następujące czynności:

@import "settings/settings"; 
@import "foundation"; 
@include foundation-everything; 

W ten sposób zaimportujesz WSZYSTKO, co Fundacja ma do zaoferowania. Oczywiście wszystko może być odrobinę przesadzone, ale jest to opcjonalny wybór.

Przykład zadania łykiem:

gulp.task('css', function() { 
    return gulp.src(assets + 'scss/*.scss') 
     .pipe(sass({ 
       includePaths: 'node_modules/foundation-sites/scss', 
       errLogToConsole: true 
      })) 
      .on('error', handleError) 
     .pipe(prefixer()) 
     .pipe(gulp.dest(themeDir)) 
     .pipe(browserSync.stream()); 
}); 

Oczywiście HandleError musi być zdefiniowana. W moim przypadku jest on zdefiniowany jako:

var handleError = function(err) { 
    if (err) { 
    var args = Array.prototype.slice.call(arguments); 
    console.log(args); 
    this.emit('end'); 
    } 
}; 

Nie zapomnij podać wymaganych zależności.