web-dev-qa-db-ja.com

Gulp-sassがFoundation6を適切にコンパイルしていません

Foundation 6 ファイルに問題があります。いくつかの理由で、すべてのsassコンポーネントが含まれていないだけです。 Foundation 5を使おうとしましたが、うまくいきました。

これが私のgulpタスクです：

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ファイルで動作しますが、基礎部分を完全に無視します。

gulp-sasszurb-foundation-6
12
user3586478

Scss /foundation.scssではなくfoundation-sites.scssファイルをインポートする必要があります。ファイルfoundation.scssには@ mixin Foundation-everythingのみが含まれています。これはfoundation-sites.scssに含まれています。

@include foundation-everything;

ただし、foundation-sites.scssの6.0.4でエラーが発生しました。これは、私のログです。

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

修正：

ファイルの行nr1を変更foundation-sites.scss from @import 'foundation';から@import 'scss/foundation';

13
Tomasz Rozmus

ファンデーション6の正しいアプローチ：

foundation.scssファイルを見ると（ https://github.com/zurb/foundation-sites-6/blob/develop/scss/foundation.scss ）

はい、必要なすべてのコンポーネントをインポートしますが、これらは現在ミックスインであり、通常のsassではないため、ミックスインを呼び出すだけで、それらを使用することを明示的に伝える必要があります。

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' }));
});
12
Jimmy Obonyo Abor

私はファウンデーションサイト（ファウンデーション6）で作業しているgulp-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;

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

2
Roman Edirisinghe

Gulp + bowerセットアップで行ったこと：/src/scss/app.scss @import 'settings'; @import '../../bower_components/foundation-sites/scss/foundation'; @include foundation-everything;settings.scssには、基礎変数のオーバーライド、カスタムCSSなどが含まれていました。私にとっての秘訣は@importフルファイルパス次に@includeミックスイン。

すべてを含めるのは過剰ですが、私は手間をかけずに開発し、 ncss を使用して死んだCSSコードを一掃することを好みます。

1
tomByrer

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

から：

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

に：

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

同様にfoundation-sites.scssファイル。

@import 'foundation';

に：

@import 'scss/foundation.scss';

これが最善のルートだとは思いませんが、私のサス、うなり声、バウアーの知識は限られています。

0
Randy Collier

Gulpfileがある場合は、「node_modules/Foundation-sites/scss」を含めてから、app.scssまたはstyle.scssで次の手順を実行します。

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

そうすれば、Foundationが提供するすべてのものをインポートできます。もちろん、すべてが少しやり過ぎかもしれませんが、それはオプションの選択です。

Gulpタスクの例：

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

必要な依存関係を含めることを忘れないでください。

0
Marcus Ekström