web-dev-qa-db-ja.com

Sassの@ifステートメントの@import

パフォーマンスのために、ログインページに必要なCSSのみをロードしたいと思います。他のページでは、すべてのcssを含むすべてのページにキャッシュされるグループ化されたcssファイルが必要です。

次のファイルがあります。

minifiedcssforloginpage.scss
grouped-pages.scss

Minifiedcssforloginpage.scssで、$ load-complete-css：falseを宣言します。その後、モジュール、レイアウト、コアのすべてのインポートを含むmyproject.scssをインポートします... myproject.scssで次のようなことをしたいです

@if $load-complete-css {
     @import module1;
     @import module2;
     @import module3;
}

したがって、minifiedcssforloginpage.scssは、cssの数が少ないgroupified-pages.css（var $ load-complete-cssがtrueに設定されている）のminifiedcssforloginpage.cssを生成します。

しかし、これは不可能であるというエラーが表示されます。「インポートディレクティブは、制御ディレクティブまたはミックスイン内では使用できません」。

if-statementimportsassdependenciesmixins
26
woutvdd

許可されていないことの1つです。あなたができる唯一のことは、それらのインポートをミックスインに変えることです（@ifの外でファイルをインポートし、適切な場所でミックスインを呼び出してください）。

明確化：

_partial.scss

@mixin partial {
    .test { color: red }
    // other styles here
}

styles.scss

@import "partial";
@if $someval == true {
    @include partial;
}
27
cimmanon

コアの開発チームは、この機能の実装に消極的ですが、新しい依存関係システムの実装を検討しています。

次のGithubの問題を参照してください。

13
John Slegers

自分にとって意味のある方法で、スタイルをさまざまな partial ファイルに入れます。次に、関連するスタイルのファイルのみをインポートする、ログインページ用の個別のSASSファイルを作成できます。

my answer から別の質問に引用するには：

現在、SASSを使用してファイルを動的に含めることはできません。 @importは制御ディレクティブ内で使用できません（例：@if）またはミックスイン、インポートディレクティブで変数を使用すると、構文に誤りがあり、ファイルの実行を早期に終了するためのディレクティブはありません（ 実質的に は条件付きインポートを許可します）。ただし、スタイルルールの構造を変更することで問題を解決できます。

...条件付きでインクルードする[すべき]スタイルがある場合は、[モジュール]ファイルまたは[ライブラリ]ファイルにミックスインでカプセル化する必要があります。 ...主な考え方は、そのようなファイルを1つインポートしてもcssは出力されないということです。これにより、これらのファイルを重複してインポートできるため、必要な場所でミックスインを使用できます。

5
Stephen M. Harris