3

MVC4 のプロジェクトにブートストラップを使用しています。これまでのところ、メイン レイアウト ページで bootstrap.less ファイルを参照していましたが、うまくいきました。ただし、各部門ページの外観をカスタマイズする必要があるという新しい要件が発生しました (各部門には、メイン レイアウトを使用する独自のレイアウトがあります)。

bootstrap.less には次の構造があります。

@import variables.less // すべての変数を定義します

@import その他 // mixins.less、reset.less などのすべてのインポート

変数オーバーライドを挿入する必要があるため、別の少ないファイルを作成しました。

bootstrap-without-variables.less //bootstrap.less からの variables.less を除いたすべてのインポートを含む

この分離の理由は、変数オーバーライドを挿入して、ページのブートストラップ スタイルをカスタマイズできるようにするためです。

SquishItを使用して、より少ないファイルをバンドルにまとめています。

バンドルは次のとおりです。

    Bundle.Css()
    .Add("~/bootstrap/variables.less")
    .Add("~/variable-override.less") // custom override
    .Add("~/bootstrap/bootstrap-without-variables.less")
    .MvcRender("styles_combined_#.js");

これはまったく機能しません。variables.less を削除して、bootstrap-without-variables.less (現在は bootstrap.less に似ています) でそれを参照すると、完全に正常に動作します。

問題は、各ファイルが個別に評価され、css に変換されてから結合されることだと思います。

最初にファイルを 1 つにバンドルしてから評価して css に変換するか、この問題に対するより良い解決策をバンドラーに指示する方法はありますか?

4

2 に答える 2

2

AlexCuseが述べたように、 SquishItだけを使用して上記のことを行う方法はありませんでした。ただし、https://github.com/jetheredge/SquishIt/issues/170で述べたように、動的な少ないコンテンツを追加できる AddString() へのオーバーロードがあります。

例えば、

.AddString("LessString",".less") // .less が拡張子

これは、LessString にインポート (@import) が含まれていない限り、問題なく機能します。そこで、https://github.com/jetheredge/SquishItからソースをダウンロードし、コードの詳細を調べ始めました。コードを調べてみると、AddString() によって読み込まれたコンテンツの CurrentDirectory が IIS のパス ("c:\windows\system32\inetsrv") に設定されていることがわかりました。その結果、インポートがスローされました

FileNotFoundException (見つからない .less で終わるファイルをインポートしています。)

そのため、現在のディレクトリを設定する方法が必要でした（インポートが検索される参照場所）

これが私がしたことです：

STEP1: CurrentDirectory というプロパティを持つように Asset を拡張

  internal string CurrentDirectory { get; set; }

STEP2: AddString() オーバーロードに 3 番目のオプション パラメータを追加

public T AddString(string content, string extension, string currentDirectory = null)
    {
        return AddString(content, extension, true, currentDirectory);
    }

STEP3: AddString() を更新して、現在のディレクトリをアセットに追加します

 T AddString(string content, string extension, bool minify, string currentDirectory = null)
    {
        if (bundleState.Assets.All(ac => ac.Content != content))
            bundleState.Assets.Add(new Asset { Content = content, Extension = extension, Minify = minify, CurrentDirectory = currentDirectory });
        return (T)this;
    }

STEP4: BundleBaseのPreprocessArbitary(リリース用)を修正してカレントディレクトリを設定する

protected string PreprocessArbitrary(Asset asset)
    {
        if (!asset.IsArbitrary) throw new InvalidOperationException("PreprocessArbitrary can only be called on Arbitrary assets.");

        var filename = "dummy." + (asset.Extension ?? defaultExtension);
        var preprocessors = FindPreprocessors(filename);
        return asset.CurrentDirectory != null ?
                    directoryWrapper.ExecuteInDirectory(asset.CurrentDirectory, () => MinifyIfNeeded(PreprocessContent(filename, preprocessors, asset.Content), asset.Minify)) :
                    MinifyIfNeeded(PreprocessContent(filename, preprocessors, asset.Content), asset.Minify);
    }

デバッグの場合、RenderDebug を変更して現在のディレクトリを設定します。

 if (asset.IsArbitrary)
            {
                var filename = "dummy" + asset.Extension;
                var preprocessors = FindPreprocessors(filename);
                var processedContent = asset.CurrentDirectory != null ?
                        directoryWrapper.ExecuteInDirectory(asset.CurrentDirectory, () => PreprocessContent(filename, preprocessors, asset.Content)) :
                        PreprocessContent(filename, preprocessors, asset.Content);
                sb.AppendLine(string.Format(tagFormat, processedContent));
            }

動的または静的なレスファイルを今すぐ追加する方法は次のとおりです。

.AddString("@import 'content/bootstrap/variables.less';", ".less", AppDomain.CurrentDomain.BaseDirectory)

上記の要件では、変数.less を文字列ビルダーに読み込み、次に variable-override.less を追加し、最後に bootstrap-without-variables.less を文字列ビルダーに追加します。

これまでのところうまくいきました。次のシナリオをテストしました。

  1. インポートを含む通常の少ないファイル。.Add("~/content/styles.less")

  2. インポートなしのインラインレス、例えば.AddString(LessString, ".less")

  3. インポートを伴う動的な少ないファイル。.AddString("@import content/bootstrap/variables.less';", ".less", AppDomain.CurrentDomain.BaseDirectory)

    近日中にプルリクエストしてみます。これが、インポートで動的な LESS コンテンツをサポートしようとしている人々の助けになることを願っています。

于 2013-07-17T16:28:16.057 に答える
1

そうです、SquishIt はファイルを結合する前に行う処理が少なくて済みます。SquishIt だけを使用して要求を実行する方法はありませんが、途中で自分でファイルを結合できると思います (.AddString メソッドを使用して、結果の .less コンテンツをバンドルに追加します)。選択肢の 1 つがあなたのニーズにより適しているかもしれませんが、私にはわかりません。

于 2013-07-15T17:31:19.147 に答える