すべてのインポートで変数とミックスインを定義していませんか？

Question

私はSCSSをgulp-scssでコンパイルしています。マイstyles.scssファイルは次のようになります。

@import "node_modules/bulma/sass/utilities/initial-variables"; 
@import "node_modules/bulma/bulma"; 
@import 'src/styles/navigation'; 

このコードの2行目はブルマをインポート、のソースコードはhereを見つけることができます。このファイルはutilitiesをインポートします。これにはmixinsが必要です。

私は私のnavigation.scssファイルでこれらのミックスインを使用しようとすると、残念ながら、私はミックスインと変数ファイルを@import場合ことは注目に値する

：

@include desktop { 
    .navbar { 
    min-height: 135px; 
    } 
} 

私は次のエラーを取得しますnavigation.scssに直接、それは正常に動作します。何が起きてる？

Answer 1

ファイル名に問題がありました。コンパイラが適切に動作するための規約であるように見える、アンダースコアが前に付いていませんでした。だからsrc/styles/navigation.scssはsrc/styles/_navigation.scssになりました。インポートは同じままでした：

@import 'src/styles/navigation'; 

Answer 2

gulp-sassを使用するとします。

私が通常行っていることは、より良い参照のためにgulpファイルにパスを作成することです。また、gulpを知らせるために、これらのノードリソースを.scssファイルで使用します。

この場合、インクルードパスでfoundationとcompass mixinsモジュールを呼び出しています。

これはあなたが単に追加することができ、それらのファイルのインポートを配置したいあなたのメイン.scssかでその後Gulfile.js

gulp.task('styles', function() { 
    gulp.src('src/scss/application.scss') 
    .pipe(sass({ 
     includePaths: [ 
     'node_modules/foundation-sites/scss', 
     'node_modules/compass-mixins/lib' 
     ], 
     outputStyle: 'compressed' 
    }).on('error', sass.logError)) 
    .pipe(gulp.dest('./public/css/')) 
}); 

で作業です：

@import 'compass'; 
@import 'foundation'; 
@include foundation-everything; 

ここでは、gulpファイルで指定したこのノードモジュールパス内のコンパスファイルと、foundation.scss（他のscssファイルを多くインポートする）を呼び出します。 基礎が利用可能になると、私はすべてのミックスインを初期化します。だから、合計

： 可能solutons： 1：このgulpfile定義は、パスがあなたにルート・エラーを解決含めるかどうかをチェックします。 2：インポートするモジュールにトリガーミックスインがないことを確認してください。ファンデーションにファンデーションなどがあります。

これが役に立ちます。