Question

我有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认为还存在许多其他错误，但同样，字体很棒，在调试模式下也能正常工作。

有什么想法吗？

Answer 1

一个简单的解决方法是从您的捆绑包中删除font-awesome，并使用常规链接标记将其直接包含在您的_Layout中。

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

Answer 2

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

BundleTable.EnableOptimizations = false;

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

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

Answer 3

我知道这是一个老问题，但万一人们还在面对这个问题。另一种解决方法是设置包名称以在路径中包含css文件夹，例如：

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

现在变为：

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

Answer 4

我遇到了与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优化模块。

-Stephen

集成Font Awesome，Less，Twitter Bootstrap和MVC4捆绑/缩小

4 个答案: