web-dev-qa-db-ja.com

SASSを使用する場合、別のディレクトリからファイルをインポートするにはどうすればよいですか？

SASSでは、別のディレクトリからファイルをインポートできますか？たとえば、次のような構造の場合：

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

template.scssは@import "common"を使用して_common.scssをインポートできますが、more_styles.scssが_common.scssをインポートすることは可能ですか？ @import "../sub_directory_a/common"や@import "../sub_directory_a/_common.scss"など、いくつかの異なることを試しましたが、何も機能しないようです。

importsass
79
spaaarky21

SASSに対するいくつかの変更により、最初に試したことが可能になりました。

@import "../subdir/common";

c:\projects\sassにあるまったく関係のないフォルダーでもこれが機能するようになりました。

@import "../../../../../../../../../../projects/sass/common";

十分な../を追加するだけで、ドライブルートに到達し、準備完了です。

もちろん、この解決策はきれいではありませんが、I c:\projects\sassを使用したり、環境変数SASS_PATHを設定したりすることなく、まったく異なるフォルダーからインポートすることはできませんでした（from： ：load_paths reference ）同じ値に。

68
Oliver

-IコマンドラインスイッチまたはRubyコードの :load_paths オプションを使用して、sub_directory_aをSassのロードパスに追加できます。したがって、root_directoryからSassを実行している場合は、次のようにします。

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

その後、単に@import "common"でmore_styles.scssを使用できます。

33
Miikka

Sass-loaderでwebpackを使用すると、〜を使用してプロジェクトのルートパスを参照できます。たとえば、OPsフォルダー構造で、sub_directory_b内のファイルにいると仮定します。

@import "~sub_directory_a/_common";

Sass-loader readmeのUsage/Importsを参照してください： https://github.com/webpack-contrib/sass-loader

13
Sammi

相対的な位置が異なるネストされたインポートを持つ.scssファイルのインポートは機能しません。 （多くの../を使用する）最上位の提案された答えは、プロジェクトのデプロイメントOSのルートに到達するのに十分な../を追加する限り機能する単なる汚いハックです。

  1. ターゲットSCSSパスをSCSSコンパイラの検索ターゲットとして追加します。これは、スタイルシートフォルダをscss設定ファイルに追加することで実現できます。これは、使用しているフレームワークの機能です。

:load_pathsでconfig.rdを使用して、コンパスベースのフレームワーク（例：Rails）に使用します

scss-config.jsonにはfourseven/meteor-scssで次のコードを使用します

{
  "includePaths": [
    "{}/node_modules/ionicons/dist/scss/"
  ]
}
  1. 絶対パス（相対パス）を使用します。

たとえば、fourseven/meteor-scssを使用すると、{}を使用して、次の例のようにプロジェクトの最上位レベルを強調表示できます。

@import "{}/node_modules/module-name/stylesheet";
7
helcode

選択された答えは実行可能なソリューションを提供しません。

OPの慣行は不規則に思えます。共有/共通ファイルは通常、標準のボイラープレートディレクトリであるpartialsの下にあります。次に、コードの任意の場所でパーシャルを解決するために、構成インポートパスにpartialsディレクトリを追加する必要があります。

初めてこの問題に遭遇したとき、SASSはおそらくノードの__dirnameに似たグローバル変数を提供し、現在の作業ディレクトリ（cwd）への絶対パスを保持していると考えました。残念ながら、それはできません。その理由は、@importディレクティブでの補間が不可能であるため、動的インポートパスを実行できないためです。

SASS docs によると。

Sass設定で:load_pathsを設定する必要があります。 OPはCompassを使用するため、ドキュメント here に従ってそれに従います。

CLIソリューションを目的どおりに使用できますが、なぜですか？ config.rbに追加する方がはるかに便利です。 config.rb（たとえば、異なるビルドシナリオ）をオーバーライドするためにCLIを使用することは理にかなっています。

したがって、config.rbがプロジェクトルートの下にあると仮定して、次の行を追加するだけです：add_import_path 'sub_directory_a'

そして今、@import 'common';はどこでも問題なく動作します。

これはOPに答えますが、さらにあります。

付録

CSSファイルを埋め込み方法でインポートする場合、つまり、CSSが標準で提供するVanilla @importディレクティブではなく、actualを使用してインポートする場合があります。 CSSファイルのコンテンツとSASSのマージ。別の question がありますが、これは決定的ではありません（ソリューションはクロス環境では機能しません）。その場合の解決策は、 this SASS拡張を使用することです。

インストールしたら、次の行を構成に追加します：require 'sass-css-importer'そして、コードのどこかに@import 'CSS:myCssFile';

これを機能させるには、拡張子を省略する必要があることに注意してください。

ただし、デフォルト以外のパスからCSSファイルをインポートしようとすると、同じ問題が発生し、add_import_pathはCSSファイルを尊重しません。したがって、それを解決するには、設定にさらに別の行を追加する必要があります。

add_import_path Sass::CssImporter::Importer.new('sub_directory_a')

これですべてがうまく動作します。

追記：sass-css-importerのドキュメントでは、CSS:拡張子を省略することに加えて、.cssプレフィックスが必要であることがわかりました。関係なく動作することがわかりました。誰かが issue を開始しましたが、これまでのところ未回答のままです。

3
adi518

Gulpは、sassファイルを監視し、includePathsを使用して他のファイルのパスを追加するジョブを実行します。例：

gulp.task('sass', function() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
    .pipe(gulp.dest('css'));
});
2
oshry levy

インポートするファイルを定義するには、すべてのフォルダーの共通定義を使用できます。あなたはそれがあなたがそれを定義しているファイルに関連していることを意識する必要があります。インポートオプションの例と詳細については、 here を確認してください。

1
Nesha Zoric

node-sass（node.jsの公式SASSラッパー）は、そのような要件に役立つコマンドラインオプション--include-pathを提供します。

例：

package.json ::

"scripts": {
    "build-css": "node-sass src/ -o src/ --include-path src/",
}

これで、プロジェクトにファイルsrc/styles/common.scssがある場合、プロジェクトのどこにでも@import 'styles/common';を使用してインポートできます。

詳細については、 https://github.com/sass/node-sass#usage-1 を参照してください。

1
Vijay Aggarwal

IncludePathsパラメーターの使用を検討してください...

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

https://stackoverflow.com/a/33588202/384884

0
Deejers

これは半分の答えです。

コンパス をチェックして、_common.scssをpartialsフォルダー内に配置し、@import commonでインポートできますが、すべてのファイルで機能します。

0
Alessandro Vendruscolo

Visual Studioで Web Compiler を使用する場合、compilerconfig.json.defaultsでincludePathにパスを追加できます。コンパイラーはインポートを探す場所としてincludePathを使用するため、いくつかの../は必要ありません。

例えば：

"includePath": "node_modules/foundation-sites/scss",
0
DavGarcia

私は同じ問題に遭遇しました。私のソリューションから、私はこれに入りました。コードは次のとおりです。

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

1つのscssを別のscssにインポートするかどうかは、部分的なものでなければなりません。別のディレクトリ名からmore_styles.scssを_more_styles.scssにインポートする場合。次に、この@import template.scssのように../sub_directory_b/_more_styles.scssにインポートします。それは私のために働いた。しかし、あなたが言ったように../sub_directory_a/_common.scssは機能していません。これは、template.scssと同じディレクトリです。それが動作しない理由です。

0
Sajidur Rahman

最良の方法は、ユーザーsass-loaderを使用することです。 npmパッケージとして入手可能です。すべてのパス関連の問題を解決し、非常に簡単にします。

0
Rut Shah