web-dev-qa-db-ja.com

MVCバンドリングとCSS相対URL

CssRewriteUrlTransformを使用すると、MVCのバンドルがCSSイメージで間違ったURLを返します。

URLがたとえばhttp://usid01-srv002/MyApplicationのイントラネットアプリケーションがあります。 IISの「既定のWebサイト」にあります。

BundleConfig.csには次のものがあります：

bundles.Add(new StyleBundle("~/bundles/jcss")
    .Include("~/Scripts/JQueryUI/css/*.css", new CssRewriteUrlTransform())
);

バンドルシステムは、これらのCSSファイルで参照されている画像に対して間違ったURLを生成し、JQueryUIの非常によくテストされたCSSファイル（FireBugから）を生成します。

404 errors due to wrong generated URL

例えば生成しています

http://usid01/path/foo.png

生成する必要がある場合：

http://usid01/MyApplication/path/foo.png

適切な場所を指すURLを生成するバンドリングシステムを取得するにはどうすればよいですか？

cssasp.net-mvcrelative-pathasp.net-mvc-5bundling-and-minification
45
Charles Burns

CssRewriteUrlTransformは、絶対パスでCSS Urlを更新します。

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",new CssRewriteUrlTransform()));

「site.css」に次のCSSクラスがあります

.Sandy
{
    background-image: url("Images/Sandy.jpg");
    border: 1px solid #c8c8c8;
    border-radius:4px 4px 4px 4px;
    box-shadow: 1px 1px 8px gray;
    background-position:left;
    background-size:contain;
    -moz-background-size:contain;
    -webkit-background-size:contain;
    -o-background-size:contain;
    background-repeat:no-repeat;
    min-height:100px;
    min-width:100px;
    display:block;
}

以下のフォルダ構造-

   -Web site Root
   -Content
   --site.css
   --Images
   ---Sandy.jpg

バンドルにより、「background-image」の次のCSS Url Pathが生成されます-

 background-image: url("/Content/Images/Sandy.jpg");

そして今、あなたがウェブサイト/ウェブアプリケーションをパス上のウェブサーバー上のウェブサイトとしてホストしている場合、ブラウザは先頭の「/」のために次のURLを使用してこのリソースのリクエストを送信するため、動作します

http://<server>/content/images/sandy.jpg

ただし、WebアプリケーションとしてWebサイトをホストする場合、問題が発生します。ブラウザはこれを相対ではなく絶対URLとして解釈し、このリソースを取得するために次のリクエストを送信するためです-

   http://<server>/content/images/sandy.jpg

したがって、この問題の解決策は、CSSファイルでも相対URLを使用し、次にBundle configからCssRewriteUrlTransformを以下のように削除することです-

background-image: url("Images/Sandy.jpg");

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
49
Bhalchandra K

壊れた画像の理由は、バンドル中に定義された新しいパスに関連する画像を見つけようとするためですつまり.

 bundles.Add（new StyleBundle（ "〜/ Content/woothemes"）。Include（
 "〜/ Content/woothemes/css/style.css"、
））;

したがって、style.cssで定義された画像パス（つまり背景画像）がある場合、Content/woothemes/css /の代わりにContent/woothemesからの相対パスを取得しようとします。 、したがって、画像は見つかりません

同じフォルダーのファイルの問題を克服するための1つの回避策は、フォルダー（ファイルが縮小される）と同じ新しいパスを定義することです。

 bundles.Add（new StyleBundle（ "〜/ Content/woothemes/css"）。Include（
 "〜/ Content/woothemes/css/style.css"、
） ）;

これにより、バンドルされたファイルと実際のファイルパスが一致し、CSSで定義されたイメージが検出されるため、問題は解決されます。

問題は、上記と同じ理由で異なるフォルダのファイルを混在させる場合にのみ解決されません

7
Muhammad Waqas Iqbal

これは私のために働く、

<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/content/styles/css")" rel="stylesheet" type="text/css" />
3
Adrian Tarnowski