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);

我正在尝试包含令人敬畏的字体。它发现 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");

不要这样做，而是将该 CSS 文件复制到它所在项目的构建后事件中Content/css，并使用宏语法使COPY命令更容易。您可以在此处找到该语法。Visual Studio 还提供了一种扩展对话框并为您提供帮助的机制，因为它显示了实际路径。

最后，更改要使用的捆绑包：

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

这篇 SO 帖子对此问题有一个有用的解决方案，它似乎是由实际为 Microsoft 工作的人在 ASP.net Bundle 代码上编写的。（奇怪的是，谁编辑了这个问题，但没有发布答案！）

问题很可能是 css 文件中的图标/图像使用了相对路径，因此如果您的捆绑包与未捆绑的 css 文件不在同一个应用程序相对路径中，它们就会成为断开的链接。

我们在待办事项列表中的 css 中重新设置了 url，但现在，最简单的做法是让你的 bundle 路径看起来像 css 目录，这样相对 url 就可以工作，即：

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

更新：我们在 1.1beta1 版本中添加了对此的支持，因此要自动重写图像 url，您可以添加一个新的 ItemTransform 来自动执行此变基。

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()));

由于未正确使用相对路径，这解决了我在生产服务器上的 Font Awesome 图标上出现 404 错误的问题。

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 回答
0

我在 Django 上遇到过这个问题，如果你愿意使用 CDN，你就不会遇到这个问题。

只需添加这个

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

src: url('../font')部分将在 CDN 级别内解决，而不是您的服务器。

于 2015-05-14T06:04:54.173 回答
0

我的捆绑方式与您的略有不同，但是您对CSS 相对路径的编辑痛苦地看起来像同样的问题。这就是我捆绑的方式。

 bundle.Add(new StyleBundle("~/Content/css").Include("~/Content/font-awesome.css", new CssRewriteUrlTransform()));

new CssReWriteUrlTransform()@font-face在 css转换src: url('../fonts/fontawesome')为src: url('/fonts/fontawesome')

我拿出来 new CssReWriteUrlTransform()，字体加载正常。

另外，确保字体路径是相对于 CSS 文件的。.woff2如果您在 II8 中托管，请确保您已添加.woffMIME 类型。

于 2016-02-02T22:06:16.003 回答