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 图标在调试中显示良好，所以我认为没有真正的错误。

第一个在：@fontAwesomePath: '../font';

我认为路径是正确的（无论如何都可以在调试中使用），但是 VS 告诉我 fontAwesomePath 不是已知的 @ 指令。

VS 认为还存在许多其他错误，但同样，字体真棒在调试模式下工作。

有任何想法吗？

4

4 回答 4

6

一个简单的解决方法是从你的包中删除 font-awesome 并将其直接包含在你的 _Layout 中，并带有一个常规的链接标签。

<link href="~/Content/font-awesome.min.css" rel="stylesheet">
于 2013-05-02T10:23:30.173 回答
3

我在 TinyMCE 上遇到了类似的问题。当 MVC 将 javascript 打包成一个包时，生成的 javascript 会引发异常。 

BundleTable.EnableOptimizations = false;

如果您将该行放在 BundleConfig 类的 RegisterBundles 函数中，这将关闭捆绑包并让您的站点在生产中工作。它不会自动最小化你的javascript，但至少东西会开始工作。

您可以让他们手动最小化每个 javascript 文件以获得最小的占用空间，并希望找到有问题的 js 文件。

于 2013-01-22T12:58:56.770 回答
1

我知道这是一个老问题，但万一人们仍然面临这个问题。解决它的另一种方法是将您的包名称设置为css在路径中包含该文件夹，例如：

bundles.Add(new StyleBundle("~/Content/styles").Include("..");

现在变成：

bundles.Add(new StyleBundle("~/Content/css/styles").Include("..");
于 2013-12-16T18:02:47.007 回答
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 回答