CODEWITHSUNDEEP
c#asp.netasp.net-mvcasp.net-mvc-4bundle
Ahmadali Shafiee
Ahmadali Shafiee

Reputation: 4657

Style bundling with the files location

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?

Upvotes: 1

Views: 2391

Answers (3)

Jacques Snyman
Jacques Snyman

Reputation: 4300

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())
);

Upvotes: 3

SHAURAJ SINGH
SHAURAJ SINGH

Reputation: 517

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")

Upvotes: 0

StriplingWarrior
StriplingWarrior

Reputation: 156544

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"));

Upvotes: 5

Related Questions