集成Font Awesome、Less、Twitter Bootstrap和MVC4捆绑/最小化

Question

我已经成功将Font Awesome、Less、Twitter Bootstrap和MVC4集成在一起，在调试模式下运作良好。

当我部署并从Web.config的编译节点中移除调试时，MVC4的捆绑和最小化就会启动。

当我以这种方式部署后浏览我的网站时，Font Awesome图标不再起作用。

查看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认为还存在许多其他错误，但是再次强调，Font Awesome在调试模式下可以正常工作。您有什么想法吗？

- ozz

Answer 1

一个简单的解决方法是从你的bundle中移除font-awesome，并在_Layout中使用普通的链接标签直接引入它。

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

- Tom Wadley

Answer 2

我在使用TinyMCE时也遇到过类似的问题。当MVC将JavaScript打包成捆绑包时，结果会抛出异常。

BundleTable.EnableOptimizations = false;

如果您在BundleConfig类的RegisterBundles函数中加入这行代码，它将关闭bundle并让您的网站在生产环境下工作。它不会自动最小化您的javascript，但至少东西会开始工作。

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

- e3garza

Answer 3

我知道这是一个旧问题，但如果人们仍然遇到这个问题，另一种解决方法是将您的捆绑名称设置为在路径中包含css文件夹，例如：

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

现在变成：

现在变成：

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

- Dimitar Dimitrov

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

- Stephen Patten