web-dev-qa-db-ja.com

node_modulesからのSASSパーシャルのインポート

Gulp、panini、mustache、sassを使用してカスタムワークフローを構築しようとすると、私の問題の1つは、node_modulesからのパーシャルを含めることです。これは、main.scssファイルの例です。

@import "node_modules/bootstrap/scss/mixins";
@import "settings";

_mixins.scssへのフルパスを入力しないようにするにはどうすればよいですか？

sassgulp
6
RomkaLTU

あなたの質問はこれに似ています： 適切なパッケージを見つけるためにnode_modulesをクロールしないSassインポート

IncludePaths引数をgulpsassに渡すことで、パスを含めることができます。例えば

.pipe($.sass({
  includePaths: ['node_modules/bootstrap/scss/', 'another/path']
})
12
Davey

node_modulesをsassパスに含めることができます。

.pipe(sass({
  includePaths: ['node_modules']
})

次に、次のようにライブラリのsassをインポートできます。

@import "bootstrap/scss/bootstrap";

または、 material-components-web の場合：

@import "@material/top-app-bar/mdc-top-app-bar";

こちらです：

  • 各ライブラリをパスに追加する必要はありません
  • サブ依存関係のインポートはシームレスに機能します。 MDCの例のmdc-top-app-barは、「@ material/elevation/mixins」をインポートします。
3
Artem Vasiliev

ここでつまずく人のために、gulp-Ruby-sassの代わりにnode-sassを使用している場合は、

loadPath: ['node_modules/bootstrap/scss/']

の代わりに

includePaths: ['node_modules/bootstrap/scss/']
1
hobberwickey

includePaths を使用するか、次のようにNPMモジュールを解決できます。

@import "~bootstrap/scss/mixins";
@import "settings";

このためのライブラリがいくつかあります sass-globbing ですが、CSSではインポートの順序が重要であるため、私は個人的にこのアプローチが好きではありません。

ベストプラクティスは、IMHOがファイルを作成することですvendor.scss;

@import "~bootstrap/scss/mixins";
@import "~bourbon/...";

次に、これをインポートしますvendor.scss：

@import "vendor.scss"

@import "partials/..."
0
jukben