Gulp-sassがFoundation 6を正しくコンパイルしていません

Question

Foundation 6ファイルで問題が発生しています。何らかの理由で、すべてのsassコンポーネントが含まれていないだけです。私はFoundation 5を使ってみましたが、うまくいきました。ここ

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

そして、私のapp.scssです：

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

それは私自身のSASSファイルで動作しますが、しかし、完全に基礎部分を無視して

は、ここに私の一気タスクです。

Answer 1

scss/foundation.scssではなく、foundation-sites.scssファイルをインポートする必要があります。ファイルfoundation.scssは基礎-sites.scssに含まれているだけ@mixinの基盤-すべてがあります

@include foundation-everything; 

しかし基盤-sites.scssは6.0.4に誤りがあり、これが私のログです： @import 'scss/foundation';へ @import 'foundation';からファイルに

変更ラインNR 1 基盤-sites.scss：

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

修正

Answer 2

main.scssファンデーション@importを変更するには、foundation-sitesのbower.jsonファイルを編集する必要がありました。

から：

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

へ：

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

としてだけでなく、基礎-sites.scssファイル。

@import 'foundation'; 

：

@import 'scss/foundation.scss'; 

私はこれが取るべき最善のルートではないと思いますが、私のSASS、うなり声と亭知識は限られています。

Answer 3

私は一口+亭セットアップをやった：/src/scss/app.scss @import 'settings'; @import '../../bower_components/foundation-sites/scss/foundation'; @include foundation-everything; settings.scss が@includeミックスイン、その後@import完全なファイルパスにした私のための基礎変数のオーバーライド、カスタムなどCSS、トリックを含んでいました。

すべてを含めるには余計ですが、不快なCSSコードを取り除くためには、uncssを使用してください。

Answer 4

私は基礎-サイト（財団6）と協力し、SASSを飲み込むています

マイ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; 

あなたはすべての基礎componenentsをロードしたくない場合は、する必要はありません。@include foundation-everythingの代わりに、必要な特定のコンポーネントを@includeと指定します。

Answer 5

土台6の正しいアプローチ：

あなたはfoundation.scssファイル（https://github.com/zurb/foundation-sites-6/blob/develop/scss/foundation.scss）を見れば

はい、それは必要なすべてのコンポーネントをインポートし、彼らは定期的に今ミックスインされないので、あなたは、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

あなたはgulpfileを持っている場合は、あなたのアプリにし、 'node_modules /基礎-サイト/ SCSS' を含めると。 scssまたはstyle.scssを実行します。

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

あなたはFoundationが提供するすべてのものをインポートすることができます。もちろん、全てが過度の過度なものかもしれませんが、それはオプションです。

一気タスクの例：もちろん

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

、handleErrorのを定義する必要があります。私の場合、次のように定義されています：

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

必要な依存関係を忘れないようにしてください。