Style bundling with the files location

Question

I want to bundle three css files in my code. One of them is for my web fonts and I use 'url' for it. But when I run the application browser cannot find the files.

This is my css file:

@font-face {
    font-family: 'neuropol';
    src: url('../Files/Font/neuropol_x_free-webfont.eot');
    src: url('../Files/Font/neuropol_x_free-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Files/Font/neuropol_x_free-webfont.woff') format('woff'),
         url('../Files/Font/neuropol_x_free-webfont.ttf') format('truetype'),
         url('../Files/Font/neuropol_x_free-webfont.svg#neuropol_x_freeregular') format('svg');
    font-weight: normal;
    font-style: normal;

}  

And this is my bundle code:

bundles.Add(new StyleBundle("~/bundles/styles/base").Include("~/Content/Styles/style.css", "~/Content/Styles/normalize.css", "~/Content/Styles/webfont.css"));

Can anybody help me to resolve the problem?

Answer 1

When there are src URLs in a CSS definition, the browser is going to check the path relative to the location from which it downloaded the CSS file. In this case, that means it's looking for the src files at ~/bundles/Files/Font/... instead of ~/Content/Files/Font/... .

Try making your bundle name match the relative location.

bundles.Add(new StyleBundle("~/Content/Styles/base-bundle.css").Include("~/Content/Styles/style.css", "~/Content/Styles/normalize.css", "~/Content/Styles/webfont.css"));

Answer 2

Have a look at this link

Basically, you can add a transform that will transform the urls in your css file to valid urls.

You can accomplish this by changing your Bundles config to this:

bundles.Add(
new StyleBundle("~/Content/Styles/base-bundle.css")
.Include("~/Content/Styles/style.css", new CssRewriteUrlTransform())
.Include("~/Content/Styles/normalize.css", new CssRewriteUrlTransform())
.Include("~/Content/Styles/webfont.css", new CssRewriteUrlTransform())
);

Answer 3

you can change it into App_Start>BundleConfig.cs like this

     bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                            "~/Content/themes/base/jquery.ui.core.css",
                            "~/Content/themes/base/jquery.ui.resizable.css",
                            "~/Content/themes/base/jquery.ui.selectable.css",
                            "~/Content/themes/base/jquery.ui.accordion.css",
                            "~/Content/themes/base/jquery.ui.autocomplete.css",
                            "~/Content/themes/base/jquery.ui.button.css",
                            "~/Content/themes/base/jquery.ui.dialog.css",
                            "~/Content/themes/base/jquery.ui.slider.css",
                            "~/Content/themes/base/jquery.ui.tabs.css",
                            "~/Content/themes/base/jquery.ui.datepicker.css",
                            "~/Content/themes/base/jquery.ui.progressbar.css",
                            "~/Content/themes/base/jquery.ui.theme.css"));

And load it in your layout page like this in the head section.

@Styles.Render("~/Content/themes/base/css")