2015-11-25 17 views
11

Ich habe einige Probleme mit Foundation 6 Dateien, aus irgendwelchen Gründen sind sie nur nicht alle der Sass Komponenten enthalten. Ich habe versucht, Foundation 5 zu verwenden, und es hat gut funktioniert.
Gulp-Sass nicht kompilieren Foundation 6 richtig

Hier ist meine Aufgabe schluck:

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!" 
     })); 
}); 

Und hier ist mein app.scss:

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

Es funktioniert mit meinen eigenen sass Dateien, sondern Fundament Teile vollständig zu ignorieren.

Antwort

13

Sie sollten eine Datei Foundation-Sites.scss, nicht scss/foundation.scss importieren. Datei foundation.scss hat nur eine @mixin Grund alles, die in Grund sites.scss enthalten ist:

@include foundation-everything; 

jedoch Grund sites.scss hat ein Fehler in 6.0.4, das ist mein log:

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

Das Update:

ändern Linie nr 1 in Datei Grund sites.scss von @import 'foundation';-@import 'scss/foundation';

+0

Ja, ich wurde von diesem String '@import 'foundation' verwirrt;' nachdem ich den Pfad geändert habe und ** foundation-sites.scss ** einschließe, fängt das schließlich an zu arbeiten. Vielen Dank. – user3586478

+0

Ich habe das gleiche Problem, aber ich komme hierher, um zu sagen, dass ich nicht glaube, dass dies die richtige Antwort ist. Zurb rät davon ab, 'fundation-sites.scss' zu verwenden und zu importieren, was das OP gerade macht. (siehe: https://github.com/urzb/foundation-sites/issues/7537) Sie möchten 'funding-sites.scss' nicht verwenden, wenn Sie nicht alles einschließen möchten. Wenn Sie benutzerdefinierte Installationen vornehmen, sollten Sie Komponenten in 'foundation.scss' modifizieren. Das gesagt. Meine kompiliert auch nicht. – buschschwick

0

Ich musste die bower.json-Datei der Foundation-Sites bearbeiten, um die main.scss-Stiftung @import zu ändern.

Von:

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

An:

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

Neben der Grund sites.scss Datei.

@import 'foundation'; 

An:

@import 'scss/foundation.scss'; 

Ich glaube nicht, das ist der beste Weg, aber mein sass zu nehmen, Grunzen und Bower Wissen ist begrenzt.

1

Was ich mit meiner großen Schluck + Bower Setup tat: /src/scss/app.scss @import 'settings'; @import '../../bower_components/foundation-sites/scss/foundation'; @include foundation-everything; settings.scss enthielt meine Stiftung Variable überschreibt, benutzerdefinierte CSS etc. Trick war für mich zu @import vollständigen Dateipfad dann @include die mixin.

Obwohl es übermäßig ist, alles zu umfassen, entwickle ich mich lieber ohne Probleme und verwende dann uncss, um toten CSS-Code zu entfernen.

2

Ich habe schlucke-sass die Arbeit mit Grundseiten (Foundation 6):

Meine main.scss Datei:

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

Wenn Sie nicht alle Stiftung componenents zu laden, Sie muss nicht.Anstelle von @include foundation-everything, einfach @include die spezifischen Komponenten, die Sie benötigen.

7

Der richtige Ansatz für Fundament 6:

, wenn Sie an der foundation.scss Datei suchen (https://github.com/zurb/foundation-sites-6/blob/develop/scss/foundation.scss)

Ja, es importiert alle erforderlichen Komponenten, aber da sie nun Mixins sind und nicht regelmäßig Sass du musst explizit sagen, dass du sie nutzen willst, indem du einfach den Mixin anrufst.

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

Ich liebe diese Lösung. Wenn ich das, was ich verwenden möchte, verkleinern möchte, kann ich meine eigene Kopie von foundation.scss erstellen und ein benutzerdefiniertes Mixin erstellen. Das includePaths war das hilfreichste Stück davon. Danke, dass du Jimmy teilst. – UncleAdam

+0

@UncleAdam Willkommen sei frei, mich irgendwelche Web-Entwicklungsfragen zu fragen –

0

Wenn Sie einen gulpfile haben, gehören 'node_modules/Grund sites/SCSS' und dann in Ihrer Anwendung. scss oder style.scss tun die folgenden:

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

So können Sie ALLES, was Foundation zu bieten hat, importieren. Natürlich ist alles vielleicht etwas übertrieben, aber das ist eine optionale Wahl.

Beispiel schluck Aufgabe:

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()); 
}); 

Natürlich muss handle definiert werden. In meinem Fall ist es definiert als:

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

Vergessen Sie nicht, die erforderlichen Abhängigkeiten zu integrieren.

Verwandte Themen