web-dev-qa-db-ja.com

SASSミックスインと変数を異なるファイルに配置できますか？

こんにちは私はGULPを使用してプロジェクトでsassファイルを別々のチャンクに整理しようとしています。ただし、ミックスインと変数を別々のファイルにインポートすると、次のようになります。

ファイル：変数.scss

//first import variables that might be used throughout all the other files
@import "common/_variables.scss";

ファイル：mixins.scss

Mixins
@import "common/_mixins.scss";

次に、たとえば他のファイルからそれらのミックスインにアクセスしてみてください

File：buttons.scss @import "common/_buttons.scss";

Gulp sassを実行すると、次のエラーが発生します。

throw er; // Unhandled 'error' event
no mixin named 'foo'

or 

undefined variable 'foo'

ミックスイン/変数がvariable.scssファイルとmixins.scssファイルで定義されているにもかかわらず。そのため、gulpはタスクを途中で中断し、スタイルシートは作成されません。

SASSに、変数とミックスインをすべて同じファイルにインポートする必要があるというルールはありますか？この場合、個別に保持したいファイルがたくさんあり、それらの中にミックスインと変数の両方をインポートし続ける必要がないため、問題が発生します。

sassgulpmixins
9
HGB

簡単な答えはあなたですdontそれらを含む可能性のあるすべてのファイルにそれらをインポートする必要があります。ただし、どこかに関係がある必要があります。これを行う方法は、1つの最終的なCSSファイル（または一連の個別のファイル）を作成するかどうかによって異なります。

前者が必要な場合は、適切な* .scssファイルをすべてインポートするだけのマスターインポートファイルを用意することを検討できます。これを、gulpビルドスクリプトがコンパイルするように見えるメインのSASSファイルにします。

正しい順序でファイルをインポートするように注意する必要があります。そのため、ミックスインを定義するファイルがインポートされる前に、ミックスインを使用するファイルをインポートする必要はありません。

たとえば、個人的には、次のように構造化されたmain.scssファイルを使用しています。

@import "common/_variables.scss";
@import "common/_mixins.scss";


// Now import the files that might use these vars/mixins
@import "common/_buttons.scss";

これはgulpを介して作成され、css/main.cssを作成します。

一連のCSSファイル（つまり、buttons.css、type.css、layout.cssなど）が必要な場合は、適切な変数を用意し、それらを呼び出す各ファイルに@import宣言をミックスインする必要があります。

12
petehotchkiss

SASSファイルをGULPと事前に連結することで、私にとって最良の解決策を見つけました。

この例のようにSTYLUS

gulp.src(config.projects.css.source)
    .pipe(sourcemaps.init())
    .pipe(mktimecss(__dirname+'/web'))
    .pipe(concat('styles'))
    .pipe(stylus({
        'include css': true,
        use: [nib()],
        // compress: true,
        linenos: false
    }))
    ...... and so on .......
2
Ivan Yaremchuk