3

私は Font Awesome、Less、Twitter Bootstrap、MVC4 をすべてデバッグ モードでうまく連携させています。

web.config のコンパイル ノードからデバッグを展開して削除すると、MVC4 のバンドルと縮小が開始されます。

このように展開されたときにサイトを閲覧すると、フォントの素晴らしいアイコンが機能しなくなります。

ソースを表示して Bootstrap のコンテンツ バンドルを取得すると、次の HTML が表示されます。

<link href="/Content/bootstrap?v=q6mwz5qEMtOzVPXqIVuZ8Z6LtMFDC3_UV0F5pQm5Gfg1" rel="stylesheet"/>

URL を取得してブラウザーに貼り付けると、縮小されたコードを取得できます。

@import"reset.less";@import"variables.less";@import"mixins.less";@import"scaffolding.less";@import"grid.less";@import"layouts.less";@import"type.less";@import"code.less";@import"forms.less";@import"tables.less";@import"font-awesome.less";@import"dropdowns.less";@import"wells.less";@import"component-animations.less";@import"close.less";@import"buttons.less";@import"button-groups.less";@import"alerts.less";@import"navs.less";@import"navbar.less";@import"breadcrumbs.less";@import"pagination.less";@import"pager.less";@import"modals.less";@import"tooltip.less";@import"popovers.less";@import"thumbnails.less";@import"media.less";@import"labels-badges.less";@import"progress-bars.less";@import"accordion.less";@import"carousel.less";@import"hero-unit.less";@import"utilities.less";@import"variables.less";@import"mixins.less";@import"responsive-utilities.less";@import"responsive-1200px-min.less";@import"responsive-768px-979px.less";@import"responsive-767px-max.less";@import"responsive-navbar.less";

他にもいくつかの CSS バンドルがありますが、上記のように表示してもエラーは表示されません。

Visual Studio 2012 プロジェクトの font-awesome.less ファイルを見ると、VS が認識しているエラーがいくつかあります。Font Awesome のアイコンはデバッグ時に問題なく表示されるので、実際にはエラーはないと思います。

最初のものは on: @fontAwesomePath: '../font';

パスは正しいと思います（とにかくデバッグで動作します）が、VSはfontAwesomePathが既知の@ディレクティブではないことを教えてくれます。

VS が同様に存在すると考えるエラーは他にも多数ありますが、ここでも、デバッグ モードで font awesome が動作します。

何か案は？

4

4 に答える 4

3

TinyMCEでも同様の問題が発生しました。MVCがjavascriptをバンドルにパッケージ化すると、結果のjavascriptは例外をスローしました。 

BundleTable.EnableOptimizations = false;

その行をBundleConfigクラスのRegisterBundles関数に入れると、バンドルがオフになり、サイトが本番環境で機能するようになります。JavaScriptを自動的に最小化することはありませんが、少なくとも何かが機能し始めます。

各javascriptファイルを手動で最小化して、フットプリントを最小にし、問題のあるjsファイルを見つけることができます。

于 2013-01-22T12:58:56.770 に答える
1

FA 4.0.3 でも同じ問題がありました。このフォルダー構造は、Bootstrap 3 の配置方法を模倣しています。BS は機能しますが、FA は機能しません。

とにかく、パスを正しく追加するためにFA cssファイルを直接編集しました

@font-face {
  font-family: 'FontAwesome';
  src: url('/Content/vendor/font-awesome/fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('/Content/vendor/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('/Content/vendor/font-awesome/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('/Content/vendor/font-awesome/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('/Content/vendor/font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

これは、NuGet の ASP.NET Web 最適化モジュール (デバッグおよびリリース) で機能します。

-スティーブン

于 2013-12-30T21:35:25.777 に答える