web-dev-qa-db-ja.com

Foundation6はスタイルを生成しません

GulpとSassを使用してFoundation6をテストするための新しいプロジェクトをセットアップしましたが、まったくコンパイルされていないようです。このトピックに近い別の投稿がありますが、受け入れられた答えは正しい解決策ではないと個人的に信じています-それはすべてのコンポーネントを含み、実際にはZurbが提案するものの反対です（この問題を参照してください： https：/ /github.com/zurb/foundation-sites/issues/7537 ）。 とにかく.。

BowerからFoundation6.1.1をインストールし、次のようにgulp-sassのgulpfile.js関数へのパスを追加しました。

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

私のtheme.scssは次のとおりです。

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

body{
  background: red;
}

Scssをコンパイルしてもエラーは発生しませんが、theme.cssの出力は次のようになります。

/**
 * Foundation for Sites by ZURB
 * Version 6.1.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
body {
  background: red;
}

したがって、コメントが出力されているため、ファイルにヒットしているように見えますが、foundation.scssのSassインポートをコンパイルしていません。

sasszurb-foundationzurb-foundation-6
18
erwstout

これは、Foundation6では@import foundationがSCSSで使用するためにFoundationミックスインのみをインポートするために発生しています。このように設定されているため、コンポーネントのFoundationミックスインを使用でき、そのコンポーネントのストックCSSクラスも追加してCSSを肥大化させることはありません。

Foundation CSSクラスのallをインポートするには、次のようにメインのapp.scssファイル（この場合はtheme.scss）をセットアップできます。

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

@include foundation-everything;

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

必要なコンポーネントの個々のCSSクラスのみをインポートするには、以下のようにapp.scssファイル（この場合はtheme.scss）をセットアップし、使用しないコンポーネントをコメントアウトします。

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

また、_settings.scssファイルをbower_components/foundation-sites/scss/settings/からコピーして、プロジェクトのscssディレクトリに配置することもできます。

最後に、gulpfile.jsのsassタスクにこれらの2つのパスが含まれていることを確認してください。

  • bower_components/foundation-sites/scss
  • bower_components/motion-ui/src/
39
Colin Marshall

私のような真のZurb初心者のために、これが私が探していた答えです（そして、見つけようとして何時間も無駄にしただけです）。

Foundation 6をインストールすると、SCSSファイルが次のように始まります。

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

これにより、SCSSファイル内のコードが実行され、変数とミックスインが生成されます。変数の例を次に示します。

$dropdown-padding: 1rem !default;

ミックスインの例を次に示します。

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

これをCSSにコンパイルしても、まったく何も生成されません。使用できる変数のセットと、呼び出すことができるミックスイン（基本的には関数）のセットがありますが、そうするまで、CSSは生成されません。したがって、次にできることは、この行にコメントを戻すことです。

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

ただし、変数のデフォルト値を設定するだけなので（フォント、色、間隔などを設定する）、何も得られません。あなたがする必要があるのは、次のようなことを始めるために新しいSCSSファイル（それをtest.scssと呼びましょう）を作成することです：

@import 'foundation';

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

最初の行には、他のすべてのSCSSファイルを参照するファイルが含まれています。

Zurbサイトはこちら で含めることができるもののリストを入手できます。これが行っているのは、一連のミックスインを実行することです。たとえば、global.scssファイルにある「foundation-global-styles」と呼ばれるものの始まりは次のとおりです。

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

CSSを生成するのはこれらのミックスインです。これらすべてはおそらく他の誰にとっても明白でしたが、私にはそうではありませんでした！

3
Andy Brown