13

Visual Studio 2012 で MVC 3 / .NET 4.0 アプリケーションを実行しています。

すべての JS ファイルと CSS ファイルの静的バンドルを作成しました。

最初に「~/」のないパスを使用したことで最初に怒鳴られましたが、サーバー上の別の仮想ディレクトリにあるファイルを含める必要があるため、/../ を使用してそれらを取得しました。

私のバンドルは次のようになります。

Bundle css = new Bundle("~/MyCSS", typeof(CssMinify));
css.AddFile("~/Content/css/Site.min.css");   
css.AddFile("~/../CommonWeb/css/fontawesome/css/font-awesome.css");   
BundleTable.Bundles.Add(css);

font-awesome を含めようとしています。CSS ファイルは正常に検出されますが、フォントとアイコンがまったく入っていません。問題の原因は次のような行だと思います。

src: url('../font/fontawesome-webfont.eot');  /* From Font-Awesome */

これを修正する方法について何か考えはありますか？ありがとう！

編集：詳細：

相対 CSS パスの要求を見ると、サーバーのルートの後になります。

http://localhost/font/fontawesome-webfont.woff

それ以外の

http://localhost/CommonWeb/css/fontawesome/font/fontawesome-webfont.woff
4

5 に答える 5

3

CSS はブラウザによって解析されます。CSS 内の URL は、CSSファイルの場所に対して相対的です。HTML ページではありません。

したがって、フォントがアップロードされている場所を確認するだけで、問題なく動作するはずです。

于 2012-09-27T12:58:08.307 に答える
3

これは、Web アプリケーションの相対ルートの上のディレクトリに移動します。

css.AddFile("~/../CommonWeb/css/fontawesome/css/font-awesome.css");

これを行う代わりに、コマンドを簡単Content/cssにするマクロ構文を使用して、その CSS ファイルが存在するプロジェクトのビルド後のイベントで MVC プロジェクトのディレクトリにコピーします。COPYその構文はここにあります。Visual Studio には、実際のパスが表示されるため、ダイアログを展開して支援を提供するメカニズムも用意されています。

最後に、使用するバンドルを変更します。

css.AddFile("~/Content/css/font-awesome.css");
于 2012-09-27T13:00:24.393 に答える
2

This SO post has a useful solution to this issue, and it appears to have been written by someone who actually works for Microsoft on the ASP.net Bundle code. (And weirdly, who edited this question, but didn't post an answer!)

The issue is most likely that the icons/images in the css files are using relative paths, so if your bundle doesn't live in the same app relative path as your unbundled css files, they become broken links.

We have rebasing urls in css on our todo list, but for now, the easist thing to do is to have your bundle path look like the css directory so the relative urls just work, i.e:

new StyleBundle("~/Static/Css/bootstrap/bundle")

Update: We have added support for this in the 1.1beta1 release, so to automatically rewrite the image urls, you can add a new ItemTransform which does this rebasing automatically.

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));

This fixed my issue with getting 404 errors on Font Awesome icons, on the production server, due to the relative paths not being used correctly.

bundles.Add(new StyleBundle("~/Content/font-awesome/css/bundle").Include(
      "~/Content/font-awesome/css/font-awesome.css", new CssRewriteUrlTransform()));
于 2016-06-01T14:14:11.287 に答える