Bootstrap font-awesome无法在MVC 5中使用bundleconfig

wwwo4jvm  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(6)|浏览(200)

如果我直接引用font-awesome.css in _layouts页面,它将工作

<link href="~/Content/font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" />

但是我在BundleConfig.cs中使用。图标不显示。

bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/font-awesome-4.0.3/css/font-awesome.css",
                        "~/Content/bootstrap.css",                        
                         "~/Content/body.css",
                        "~/Content/site.css",
                        "~/Content/form.css"
                     ));

我还观察到浏览器控制台有错误的字体目录。Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:51130/fonts/fontawesome-webfont.woff?v=4.0.3
会有什么问题呢?

w1e3prcc

w1e3prcc1#

绑定时尝试使用CssRewriteUrlTransform

bundles.Add(new StyleBundle("~/Content/css").Include(
        "~/Content/bootstrap.css",                        
        "~/Content/body.css",
        "~/Content/site.css",
        "~/Content/form.css"
    ).Include("~/Content/font-awesome-4.0.3/css/font-awesome.css", new CssRewriteUrlTransform());

这会将css文件中的所有资源的url更改为绝对url,这样绑定就不会弄乱相对路径。
CssRewriteUrlTransform的文档

xmq68pz9

xmq68pz92#

我的解决方案很简单:运行PM〉Install-Package FontAwesome,并引用正确的路径:

.Include("~/Content/font-awesome.min.css")
pwuypxnk

pwuypxnk4#

在版本5.1.0中,我必须引用all.css而不是fontawesome.css,即:

bundles.Add(new StyleBundle("~/bundles/fontawesome").Include(
    "~/Content/all.css",
    new CssRewriteUrlTransform()
));
4szc88ey

4szc88ey5#

我为这个问题补充另一个答案,我是否通过混合其中的一些找到了解决方案。

  1. Most voted answer是主要的解决方案,但也必须
    1.添加this answer建议的条目。
    1.请关注most voted answer中@feradz的评论:“* 删除. min.css版本--它导致优化程序无法生成具有正确路径的缩小版本 *”

最后一点是关键:js文件的分布式“min”版本不遵循“CssRewriteUrlTransform”规则。因此,手动删除bootstrap.min.css、font-awesone.min.css最终解决了该问题。

6fe3ivhb

6fe3ivhb6#

我也收到了同样的错误消息。我不得不将此线程中列出的答案组合在一起:
1/按照@Simon C:

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

这是为了修复相对URL,但是,我不得不删除font-awesome.min.css文件从我的bower目录每次我发布,否则bundler会感到困惑,不包括和缩小font-awesome.css文件。所以...
2/我不得不按照@miha在评论中的建议,用CssRewriteUrlTransform()修改font-awesome.min.css文件中的相对url,所以我决定重写.min文件中的url,只包含它而不是未缩小的版本,这样做很有效:

.Include("~/Content/font-awesome-4.0.3/css/font-awesome.min.css", new CssRewriteUrlTransform());

如果我没理解错的话,bundler不会再尝试缩小.min文件,因为它已经被缩小了。唯一的“缺点”是它没有将font-awesome.min.css内容连接到bundler创建的单个css文件中。它将单独包含。

相关问题