web-dev-qa-db-ja.com

Twitter bootstrapグリフィコンはリリースモード404では表示されません

私はASP.NET MVC 4のプロジェクトに取り組んでおり、次の手順を実行しました。

  1. ダウンロードしたTwitter bootstrap from http://blog.getbootstrap.com/2013/12/05/bootstrap-3-0-3-released/

  2. フォントファイルのビルドアクションをコンテンツに設定します（ファイルは〜/ Content/fontフォルダーにあります）

    glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

  3. RouteConfig.csに追加されました

    routes.IgnoreRoute（ "{folder}/{* pathInfo}"、new {folder = "Content"}）;

  4. Web.configに次の要素を追加しました

    <?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
   <staticContent>
       <remove fileExtension=".eot" />
       <remove fileExtension=".ttf" />
       <remove fileExtension=".otf"/>
       <remove fileExtension=".woff"/>
       <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
       <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
       <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
   </staticContent>
</system.webServer>

  5. BundleConfig.csに次のコードが含まれています

    bundles.Add(new StyleBundle("~/bundles/maincss")
                    .Include("~/Content/bootstrap/bootstrap.css")
                    .Include("~/Content/bootstrap/bootstrap-theme.css")
                    .Include("~/Content/hbl-full.css"));

    また、次のコードで試しました

    IItemTransform cssFixer = new CssRewriteUrlTransform();

bundles.Add(new StyleBundle("~/bundles/maincss")
                    .Include("~/Content/bootstrap/bootstrap.css", cssFixer)
                    .Include("~/Content/bootstrap/bootstrap-theme.css", cssFixer)
                    .Include("~/Content/hbl-full.css", cssFixer));

  6. メインのLayout.cshtmlで呼び出されます

    @ Styles.Render（ "〜/ bundles/maincss"）

それでもローカルホストのアイコンは通常どおり表示されますが、コードをプッシュしてサーバーをリリースすると、アイコンの代わりに正方形しか表示されず、Chromeのコンソールタブに表示されます

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.woff 404（Not Found）test：1

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.ttf 404（見つかりません）テスト：1

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.svg 404（見つかりません）テスト：1

ありがとうございました。

c#asp.netasp.net-mvctwitter-bootstrapglyphicons
34
22db05

私はこの問題を抱えていましたが、リリースモードでビルドする際の縮小が原因で発生していることがわかりました。

bootstrapサイトからファイルを手動でダウンロードし、バンドルを構成するのではなく、私のためにnugetパッケージを使用します。

それを行うには、次の手順を実行します。

次のコマンドを実行して、Bootstrapをインストールします。

Install-Package Twitter.Bootstrap.MVC

これにより、すべてのbootrapファイルがダウンロードされ、以下の事前定義されたBootstrap bundle config：

public class BootstrapBundleConfig
{
    public static void RegisterBundles()
    {
        // Add @Styles.Render("~/Content/bootstrap") in the <head/> of your _Layout.cshtml view
        // For Bootstrap theme add @Styles.Render("~/Content/bootstrap-theme") in the <head/> of your _Layout.cshtml view
        // Add @Scripts.Render("~/bundles/bootstrap") after jQuery in your _Layout.cshtml view
        // When <compilation debug="true" />, MVC4 will render the full readable version. When set to <compilation debug="false" />, the minified version will be rendered automatically
        BundleTable.Bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
        BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap").Include("~/Content/bootstrap.css"));
        BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap-theme").Include("~/Content/bootstrap-theme.css"));
    }
}

上記には、バンドルのレンダリング方法を説明するコメントも含まれています。

元の404フォントエラーは、フォントフォルダーが縮小されたcssで指定されているものとは異なるレベルにあるためだと思います。

現在のソリューションを維持したい場合、404を修正できる唯一の方法は、フォントフォルダーをWebアプリケーションのルートにコピーすることでした。

ローカルでテストするには、Web設定からdebug="true"を削除して、AppHarborへのデプロイを保存します。

7
hutchonoid

解決方法は次のとおりです-MVC5およびBootstrap 3.1.1。

私のファイルは次のようにプロジェクトで整理されています：

/Content/Bootstrap/bootstrap.css
                   bootstrap.min.css
/Content/fonts/glyphicons-halflings-regular.eot
               glyphicons-halflings-regular.svg
               glyphicons-halflings-regular.ttf
               glyphicons-halflings-regular.woff

次に、仮想パスに別のレベルを追加しましたbundle config

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

以前は~/Content/cssを使用していました

そしてview ...

@Styles.Render("~/Content/site/css")

これは機能しましたが、まだフォントの1つで404を受け取っていたので... Gilesのソリューションを追加しました。

<?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
    <staticContent>
        <remove fileExtension=".eot" />
        <remove fileExtension=".ttf" />
        <remove fileExtension=".otf"/>
        <remove fileExtension=".woff"/>
        <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
        <mimeMap fileExtension=".otf" mimeType="font/otf" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
</system.webServer>
24
Jasen

フォントフォルダーをWebアプリのルートにコピーし、web.configのMIMEタイプを次のように変更します。

<?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
  <staticContent>
    <remove fileExtension=".eot" />
    <remove fileExtension=".ttf" />
    <remove fileExtension=".otf"/>
    <remove fileExtension=".woff"/>
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
    <mimeMap fileExtension=".otf" mimeType="font/otf" />
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  </staticContent>
</system.webServer>

私のために問題を修正しました。 .woff mimeTypeは問題のmimeTypeとは異なることに注意してください。

23
Giles Roberts

IIS 7.5ウェブサーバーを使用して、同じ問題が発生しました。

解決策は、Webサーバー上のMIMEタイプがapplication/octet-streamのファイル名拡張子のリストに.woffを追加することでした。

Web.configでも同じことができます。

<staticContent>
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>
9
Heimdalingen

同じ問題がありました。理由はわかりませんが、bootstrap.min.cssファイルを削除し、バンドルにCssRewriteUrlTransformを設定すると、すべてが機能します。私はbootstrap v3.1.1を使用しています

編集：いくつかの調査の後、ソリューションはここで定義されています： CssRewriteUrlTransformは呼び出されていません したがって、代わりにbootstrap.min.cssを削除するか、bootstrap.min.cssを参照しますbootstrap.cssを使用すると、ファイルのバンドリング/縮小が強制されるため、CssRewriteUrlTransformが呼び出されます。

4
asidis

同じ問題がありました。ブートストラップのCDNを使用して回避しました。

1
Gary Brunton

IgnoreRouteで、「Content」フォルダーを指定しました。それがあなたが要求しているものであるので、フォント用の追加も試してください。

routes.IgnoreRoute("{folder}/{*pathInfo}", new { folder = "fonts" });
0
Andrés Nava - .NET