Question

我在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

Answer 1

CSS由浏览器解析。 CSS中的URL与 CSS 文件的位置有关。不是HTML页面。

所以，只需检查上传字体的位置，它们就可以正常工作。

Answer 2

这将转到Web应用程序的相对根目录上方的目录：

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

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

最后，更改要使用的包：

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

Answer 3

This SO post有一个很有用的解决方案来解决这个问题，它似乎是由一个在ASP.net Bundle代码上真正为Microsoft工作的人编写的。 （奇怪的是，谁编辑了这个问题，但没有发表答案！）

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

我们在待办事项列表中使用css重新定位网址，但就目前来说，这是一个简单的方法   要做的是让你的包路径看起来像css目录   相对网址正常工作，即：

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

更新：我们在1.1beta1版本中添加了对此的支持，所以自动重写图片网址，可以添加新的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()));

Answer 4

我和Django有这个问题，如果你愿意使用CDN，你将不会遇到这个问题。

只需添加此

即可

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

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

Answer 5

我的捆绑方式与你的捆绑方式略有不同，但你对 CSS相对路径的编辑看起来很痛苦。这就是我捆绑的方式。

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

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

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

另外，请确保字体路径与CSS文件相关。如果您在II8中托管，请确保添加了.woff2和.woff MIME类型。

使用Visual Studio 2012 Bundling时如何正确路径相对CSS路径？

5 个答案: