Lessファイルとcssファイルのバンドル

StackOverflow https://stackoverflow.com//questions/12660813

質問

私は、あなたが一緒に使用するファイルの束をブラウザへの単一の配信にグループ化するためにバンドルを使用する必要があると感じています。これは、たとえば私のルートスタイルでは、次のようなことをしたいということを意味します:

var bundle = new StyleBundle("~/Content/style").Include(
    "~/Content/mystyle.less",
    "~/Content/bootstrap.css",
    "~/Content/bootstrap-responsive.css");
bundle.Transforms.Add(new LessTransform());
bundle.Transforms.Add(new CssMinify());
bundles.Add(bundle);

しかし、これは非常にうまく動作していないようです lessファイルをバンドルするためのカスタム変換技術 LessTransformに渡す前に、すべてのファイルを単一のcssファイルに事前にバンドルしているように見えます。私が言うことができることから、この方法は、すべてのlessファイルを一緒にバンドルする場合にのみ機能します。

同じバンドル内のlessファイルとcssファイルの両方を許可するバンドルを取得する方法はありますか？

役に立ちましたか？

解決 4

これをもう少し調べて、StyleBundleの代わりにバンドルを使ってみましたが、まだ問題がありました。この問題は、嫌いな構文を持つbootstrap.cssファイルと特に関係があると思います。

他のヒント

トランスフォーマーは、コンバーターに渡す前にすべてのCSS/LESSコンテンツを連結します。つまり、lessスタイルシート内に常に標準のCSSを含めることができるので、コンバータはLESSとCSSの両方の存在を窒息させるべきではありません。

問題は、あなたが使用していることのようです StyleBundle 既にtransformerが関連付けられているオブジェクト。ジェネリックを使用してみてください Bundle 私は私の設定で行うように、このように:

var customStyles = new Bundle("~/bundle/style/css")
                       .Include("~/Content/normalize.css","~/Content/*.less");
bootstrapStyles.Transforms.Add(new LessTransform());
bootstrapStyles.Transforms.Add(new CssMinify());
bundles.Add(customStyles);

以下のあなた自身の答えについては、ブートストラップの問題。cssファイルは、LESS transformerがそれを好まないということではありませんが、おそらく@importsのパスの問題であり、LESS transformerが何かを使用して、依存関係スタイルシートへの適切なパスを解決することを確認してください。

私はすべてのCSSが有効であると信じている（しかし、すべてが有効なCSSではありません）

では、Bootstrap CSSファイルにLessTransformを適用しているファイルファイルは違いはありません。

それでも、ブラウザに配信するためにすべてのファイルを1つのCSSファイルにまとめます。

設計時期の間にパフォーマンス問題があるかもしれません。

正しい出力は依然として生産され、キャッシングは実行時パフォーマンスの問題を防ぐでしょう。

これが古い投稿の少しであることを知っていますが、私は誰かに使うかもしれない奇妙なことに気づいた...

LESSの少ないファイルも含まれている場合、BundleオブジェクトはCSSファイルの名前でハイフンが好きではないことがわかりました。すなわち。： 

var frontendStyles = new Bundle("~/bundles/frontend.main.css")
            .IncludeDirectory("~/Content/less", "*.less")
            .Include(
                "~/Content/ladda.css",
                "~/Content/jquery.mobile.custom.structure.min.css",
                "~/Content/jquery-ui.1.9.2.custom.css"
            );
.

は私のために機能しませんが、次のことが行われます（JQueryUIファイル名に変更）： 

var frontendStyles = new Bundle("~/bundles/frontend.main.css")
            .IncludeDirectory("~/Content/less", "*.less")
            .Include(
                "~/Content/ladda.css",
                "~/Content/jquery.mobile.custom.structure.min.css",
                "~/Content/jqueryui.1.9.2.custom.css"
            );
.

そのため、"~/Content/bootstrap-responsive.css"から"~/Content/bootstrapresponsive.css"へのファイル名を変更すると、問題を非常によく分類できます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top