Problem with the Bundle

Asked

Viewed 212 times

1

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.

3 answers

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.

0

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

estrutura de diretorios

0

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');
    ...
}
  • It is unfortunately the project structure is not this way, and it will not be possible to put this folder at the root.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.