37

パフォーマンスのために、ログイン ページに必要な 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 は、grouped-pages.css より少ない css で minifiedcssforloginpage.css を生成します (var $load-complete-css が true に設定されています)。

しかし、「コントロール ディレクティブまたはミックスイン内でインポート ディレクティブを使用できない可能性があります」というエラーが表示されます。

4

6 に答える 6

39

絶対に許されない行為の一つです。あなたができる唯一のことは、それらのインポートを mixin に変換することです (ファイルを の外にインポートし、@if必要に応じて mixin を呼び出します)。

説明:

_partial.scss

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

スタイル.scss

@import "partial";
@if $someval == true {
    @include partial;
}
于 2012-12-14T13:11:09.357 に答える
13

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

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

于 2014-03-30T12:28:39.053 に答える
7

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

別の質問に対する私の回答から引用するには：

現在、SASS を使用してファイルを動的に含めることはできません。 @importコントロール ディレクティブ (例: ) または mixin 内では使用できません@if。インポート ディレクティブで変数を使用するのは構文に誤りがあり、ファイルの実行を早期に終了するためのディレクティブはありません (これ により、条件付きインポートが事実上可能になります)。ただし、スタイル ルールの構造を変更することで問題を解決できます。

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

于 2014-01-15T21:41:54.943 に答える