Problem with the Bundle

Navigation
1

I'm developing a project and it's time to work on its performance, and I've been using the bundling and minification MVC 4.5 , it worked as expected, it put together all the styles that are set up in a bundle , made a minified in> and placed in a link only, to decrease the number of requests of the application.

Problem 1:

But the problem is that I am using Bootstrap 3 and Font Awesome , and on these faces there are relative paths for the fonts: 

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

Problem 2:

The first problem is that it does not find the fonts, and the second problem is that content:before is being generated with a strange character: 

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

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

    
asked by anonymous 21.02.2014 / 20:01

3 answers

1

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

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 section above, I created only one instance of the class and used it in several files, but I saw cases of people making a new for each file.

The slightly more elaborate solution, not to create multiple instances or to write .Include every time is to use this solution in the github , getting it this way.

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 solved my problem.

    
27.02.2014 / 22:08
0

If your font directory is in the root, use: 

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

To use the styles you have a tip to follow: Put your font folder along with your css files, just like the images folder is in the figure below.

When registering your css, place the path in the "~/Content/themes/base/aqui_pode_irqualquernome" bundle, equal to your directory structure

    
25.02.2014 / 21:06
How to calculate the difference between two distinct hours in milliseconds? How do I get the images in place that the mouse pointer is in?