web-dev-qa-db-ja.com

GulpのincludePathsは何をしますか？

プロジェクトでBourbonおよびNeat Sassライブラリの使用を開始しようとしています。 SassをGulpでコンパイルしたい。これは、チュートリアルの1つで見つけた簡単なstylesタスクのセットアップです。

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    neat = require('node-neat').includePaths;

var paths = {
    scss: './assets/styles/*.scss'
};

gulp.task('styles', function () {
    return gulp.src(paths.scss)
        .pipe(sass({
            includePaths: ['styles'].concat(neat)
        }))
        .pipe(gulp.dest('./dist/styles'));
});

gulp.task('default', function () {
    gulp.start('styles');
});

次に、メイン.scssファイルインポートを配置します。

@import "bourbon";
@import "base/base";
@import "neat";

このタスクは正しく実行されます。

ここで私を困惑させるのは、includePathsが正確に行うことです。上記の例に基づいて、誰かがincludePathの役割を説明できますか？

sassgulpbourbonneat
23
luqo33

SASSコンパイラは、SASS @importsを解決するときにloadPathsの各パスを使用します。

loadPaths: ['styles/foo', 'styles/bar']

@import "x"; // found via ./styles/foo/_x.scss
@import "y"; // found via ./styles/bar/_y.scss

コンパイラは、left-to-rightからのloadPathsの各パスを考慮して、各@importを解決することに注意してください（UNIX環境の$PATHと同様）。シナリオの例は次のとおりです。

loadPaths: ['styles/i', 'styles/ii', 'styles/iii', 'styles/iv']

@import "x"; // no file at ./styles/i/_x.scss
             // no file  at ./styles/ii/_x.scss
             // found a file  at ./styles/iii/_x.scss ...
             //     ... this file will be used as the import
             //     ... terminate lookup
             // the file ./styles/iv/_x.scss will be ignored

_x.scssにはstyles/iファイルがなかったため、styles/iiの中を見るために移動しました。最終的に、_x.scssでstyles/iiiファイルが見つかり、検索が終了しました。 loadPathsの各フォルダーを、配列の最初の要素から右に向かって見ていきます。すべてのパスを試行した後、ファイルが見つからない場合は、この@importステートメントが無効であることを宣言します。

ロードライブラリは、外部ライブラリ（bournon/neatなど）がある場合に便利です。外部ライブラリは大きく、多くの@importステートメントを使用します。ただし、プロジェクトのフォルダー構造と一致しないため、解決されません。ただし、外部ライブラリ内の@imports doが解決されるように、余分なフォルダーをloadPathsに追加できます。

23
James Lawson

includePaths

タイプ：配列デフォルト：[]

Libsassが@import宣言の解決を試みるために調べることができるパスの配列。データを使用する場合は、これを使用することをお勧めします。

sassでは、sassファイルを複数のフォルダーに整理できますが、コンパイル時にmain.sassでインポートできるようにするため、includePathsを指定して、sassがどこにあるかを知ることができます@import sass file、ここではnode-neat、いくつかのスタイルをインポートしたい場合、デフォルトでは、sassはどこを見ればよいかわからないため、sassにインポートするファイルの場所を伝える必要があります。

5
Sean