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

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

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

SASSにいくつかの変更を加えたことで、最初に試したことが可能になったようです。

@import "../subdir/common";

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

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

../最終的にドライブのルートに到達することを確認するのに十分なだけ追加してください。

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

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

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

そして、あなたは簡単に使用することができます@import "common"の中でmore_styles.scss。

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

@import "~sub_directory_a/_common";

ドキュメント：https : //github.com/webpack-contrib/sass-loader#resolving-import-at-rules

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

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

コンパスベースのフレームワーク（例：レール）:load_pathsでat config.rdを使用

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

{
  "includePaths": [
    "{}/node_modules/ionicons/dist/scss/"
  ]
}

2. 絶対パス（対相対パス）を使用します。

例：をfourseven/meteor-scss使用{}すると、次の例のように、プロジェクトの最上位を強調表示するために使用できます

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

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

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

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

SASSドキュメントによると。

:load_pathsSassの設定で設定する必要があります。OPはコンパスを使用しているので、ここのドキュメントに従ってそれに従います。

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

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

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

これでOPに答えますが、それ以外にもあります。

付録

CSSファイルを組み込みの方法でインポートする場合、つまり、@importCSSがそのまま提供するバニラディレクティブではなく、CSSファイルのコンテンツとSASSを実際にマージする場合に遭遇する可能性があります。結論が出ていない別の質問があります（解決策はクロス環境では機能しません）。解決策は、この SASS拡張を使用することです。

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

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

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

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

これですべてがうまくいきます。

PS、私はsass-css-importerドキュメントCSS:が.css拡張子を省略することに加えてプレフィックスが必要であることを示していることに気づきました。関係なく動作することがわかりました。誰かが問題を起こしましたが、これまでのところ未解決のままでした。

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

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

node-sass（の公式SASSラッパーnode.js）は、--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を参照してください。

インポートするファイルを定義するには、すべてのフォルダーの共通定義を使用できます。定義しているファイルに関連していることを知っておく必要があります。インポートオプションの詳細については、こちらで確認できます。

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

例えば：

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

これは半分の答えです。

Compassをチェックしてください。これを使用し_common.scssてpartialsフォルダー内に配置し、でインポート@import commonできますが、すべてのファイルで機能します。

私は同じ問題に出くわしました。私の解決策から私はこれに入りました。だからここにあなたのコードです：

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

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

includePathsパラメータの使用方法を調べてください...

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

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

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

私は同じ問題を抱えていたので、ファイルにパスを追加することで解決策を見つけました：

@import "C：/ xampp / htdocs / Scss_addons / Bootstrap / bootstrap";

@import "C：/ xampp / htdocs / Scss_addons / Compass / compass";