1

I have bundled plugins css file as

 StyleBundle adminArea = new StyleBundle("~/files/css/admin/common");
 adminArea.Include("~/assets/global/plugins/font-awesome/css/font-awesome.css");

as font awesome uses its font which is located in its directory I copied its fonts located in that plugin directory to fonts folder in root level and changed the location in css file as

@font-face {
  font-family: 'FontAwesome';
  src: url('/fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), 
      url('/fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), 
      url('/fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), 
      url('/fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
       url('/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

When this bundle is requested the font awesome css file point font using relative path as font face source url is change to ../fonts/*.eot?v=4.4.0

@font-face{
font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.4.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal
}

Which makes request goes to virtual path created for bundle where font are not placed.

My confusion is why bundling changed font absolute path to relative path. How can I solve this without creating folder structure as I created for bundle? MVC Version 5 .NET Framework : 4.5

Note

  1. I have changed font url only in unminified version of css minified version is not touched in any way.
  2. I have also enabled optimization in bundle.
Bhuban Shrestha
  • 1,239
  • 9
  • 22
  • Yup, paths in CSS are relative to the CSS file. Once bundled, the CSS file path changes to your bundle name. However, take a look at this Q&A as it specifies how to retain your paths in the CSS bundle - https://stackoverflow.com/questions/20484188/mvc-bundling-and-css-relative-urls. The short of the answer is `bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",new CssRewriteUrlTransform()));` - note the CssRewriteUrlTransform() at the end of the bundle declaration. – Tommy Jun 22 '17 at 17:44
  • @Tommy thanks for info. I haven't tested your provided solution but I think appending extra parameter in Include method makes one to think about what that parameter is going to do to that included file. I will test that solution soon but I found a solution to my problem. – Bhuban Shrestha Jun 22 '17 at 18:01
  • Its a valid concern but actually very innocuous. That extra parameter converts your relative URLs in CSS to absolute URLs in CSS. That is what allows the bundle to still render at the name you give it while maintaining links to your icons, fonts, etc. – Tommy Jun 22 '17 at 18:31

1 Answers1

0

I don't know how that is being handled or implemented in bundling and minification but following solution worked for me and I hope will work for someone who are facing or will be facing problem like I did.

As I said I have changed font path only in unminified version of css and minified version of css is untouched.

While you enable optimization in bundle which include unminified version of css and you have minified version of css for same file for e.g

Sample.css and Sample.min.css

Then creating a bundle and minification will take original minified version of css rather than minifying unminified version of css.

Thus changing font path in both files will solve the problem. This should also apply for images.

Bhuban Shrestha
  • 1,239
  • 9
  • 22