Problem with the Bundle

Question

I’m developing a project and it’s time to work on the performance of it, and I went to use the scheme of bundling and minification of MVC 4.5, it worked as expected, it joined all the styles that are configured in a Bundle, made a minified and put in a single link, to decrease the number of requests of the application.

---

Problem 1:

Only the problem is I’m using the Bootstrap 3 and the Font Awesome, and on these guys there are relative paths to the sources:

@font-face {
    font-family: 'FontAwesome';
    src: url('../font/fontawesome-webfont.eot?v=3.2.1');
    ...
}

---

Problem 2:

The first problem is that he can’t find the sources, and the second problem is that the content:before is being generated with a strange character:

.icon-reorder:before {
    content: "";
}

---

Observing: I believe this second problem may be because of the first.

Answer 1

I discovered a two ways to solve this problem, the first is by using a native class of the 4.5 framework new CssRewriteUrlTransform();, getting the code this way:

IItemTransform cssFixer = new CssRewriteUrlTransform();

 #region Common Styles
    bundles.Add(new StyleBundle("~/Content/commonStyle")
        .Include("~/Content/Vendor/bootstrap/css/bootstrap.css", cssFixer)
        .Include("~/Content/Vendor/bootstrap/css/bootstrap-reset.css", cssFixer)
        .Include("~/Content/Vendor/font-awesome/css/font-awesome.css", cssFixer)
 );
 #endregion

In this excerpt above, I created only one instance of the class and used it in several files, but saw cases of people making one new for each file.

The other solution a little more elaborate, not to create several instances or stay writing .Include all the time is using this solution on github, thus remaining.

Method:

public static Bundle IncludeWithCssRewriteTransform(
this Bundle bundle, params String[] virtualPaths) {
    if (!(bundle is StyleBundle)) {
        throw new ArgumentException("Only available to StyleBundle", "bundle");
    }
    if (virtualPaths == null || virtualPaths.Length == 0) {
        throw new ArgumentNullException("virtualPaths", "Cannot be null or empty");
    }
    IItemTransform itemTransform = new CssRewriteUrlTransform();
    foreach (String virtualPath in virtualPaths) {
        if (!String.IsNullOrWhiteSpace(virtualPath)) {
            bundle.Include(virtualPath, itemTransform);
        }
    }
    return bundle;
}

Using in your Bundle:

bundles.Add(new StyleBundle("~/css/site").IncludeWithCssRewriteTransform(
    "~/Content/themes/base/jquery-ui.css",
    "~/Content/bootstrap.css",
    "~/Content/bootstrap-responsive.css",
    "~/Content/site.css"
));

This has solved my problem.

Answer 2

To use the styles have a hint that you should follow: Place your font folder along with your css files, just like the images folder is in the figure below.

When registering your css, put the path in the Bundle "~/Content/themes/base/aqui_pode_irqualquernome", equal to its directory structure

Answer 3

If your directory font is in the root, use so:

@font-face {
    font-family: 'FontAwesome';
    src: url('/font/fontawesome-webfont.eot?v=3.2.1');
    ...
}