Rendering style bundles bundles not the same as style links

Question

I have an ASP.NET MVC application that uses the Metronic template from keenthemes.

When i use bundles in my layout for my css , it doesnt work well. Most of the icons do not appear

If i switch to direct links then everything is ok.

Javascript is ok.

Bundles config and layout use:

bundles.Add(new StyleBundle("~/bundles/metronic-app").Include(
    "~/assets/global/plugins/font-awesome/css/font-awesome.min.css",
    "~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",
    "~/assets/global/plugins/uniform/css/uniform.default.css",
    "~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
    "~/assets/global/css/components.css",
    "~/assets/global/css/plugins.css",
    "~/assets/admin/layout2/css/layout.css",
    "~/assets/admin/layout2/css/themes/default.css",
    "~/assets/admin/layout2/css/custom.css"));


@Styles.Render("~/bundles/metronic-app")

Direct links:

<link href="~/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="~/assets/global/css/components.css" rel="stylesheet" type="text/css" />
<link href="~/assets/global/css/plugins.css" rel="stylesheet" type="text/css" />
<link href="~/assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css" />
<link id="style_color" href="~/assets/admin/layout2/css/themes/default.css" rel="stylesheet" type="text/css" />
<link href="~/assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css" />

Here are the errors from chrome console:

console errors

score 0 · Answer 1 · edited Aug 12 '18 at 16:37

I should have been using the CssrewriteUrlTransform class in my bundle configuration in order to make the asset's paths absolute.

What worked is this:

bundles.Add(new StyleBundle("~/bundles/metronic-app").Include(
                "~/assets/global/plugins/uniform/css/uniform.default.css",
                "~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
                "~/assets/global/css/components.css",
                "~/assets/global/css/plugins.css",
                "~/assets/admin/layout2/css/custom.css")
                .Include("~/assets/admin/layout2/css/layout.css", new CssRewriteUrlTransform())
                .Include("~/assets/admin/layout2/css/themes/default.css", new CssRewriteUrlTransform())
                .Include("~/assets/global/plugins/font-awesome/css/font-awesome.min.css", new CssRewriteUrlTransform())
                .Include("~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",new CssRewriteUrlTransform()));

Hint from this SO Question

Rendering style bundles bundles not the same as style links

1 Answers1

Linked