Bundled css not displaying after deploy ... ASP.NET MVC4

Question

When deploying my MVC application, the .NET 4.5 framework is bundling & minifying my CSS. However, the resultant file is empty, therefore the CSS rules are not applied. In Chrome, I get a Resource interpreted as Stylesheet but transferred with MIME type text/plain warning. In IE9, I get a CSS was ignored due to mime type mismatch warning.

This is what's in my BundleConfig

bundles.Add(
    new StyleBundle("~/Content/bootstrap").Include(
        "~/Content/bootstrap/bootstrap-responsive.css",
        "~/Content/bootstrap/bootstrap-editable.css",
        "~/Content/bootstrap/FileUpload.css"));

Here is my Layout head:

<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <title>@ViewBag.Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <link href="@ViewBag.StyleUrl" rel="stylesheet" type="text/css" />
    @Styles.Render("~/Content/bootstrap")
    <script src="~/scripts/libs/modernizr/modernizr-2.5.3.js" type="text/javascript"></script>
</head>

The extra stylesheet is for a dynamically loaded stylesheet based on config in our Admin tool.

When I run this locally, or if I set debug="true", then I get my individual files & everything looks as it should. If I hardcode these in to my Layout page, they display fine. I've checked IIS & see the correct MIME type for CSS (which makes sense given that hardcoded values work). I've also checked to make sure the "Static Content" role service is installed, as I came across that in my googling as well.

Any thoughts?

Can you show your css include in the html?

NunoCarmo
– NunoCarmo

2013-02-19 23:33:40 +00:00
Commented Feb 19, 2013 at 23:33 — NunoCarmo
– NunoCarmo, Commented Feb 19, 2013 at 23:33

stooboo · Accepted Answer · 2013-02-20 01:12:50Z

25

The bundle name is the same as the folder name on the filesystem,

Change your bundle to

bundles.Add(
new StyleBundle("~/Content/bootstrapBundle").Include(
    "~/Content/bootstrap/bootstrap-responsive.css",
    "~/Content/bootstrap/bootstrap-editable.css",
    "~/Content/bootstrap/FileUpload.css"));

i.e. so the name of the bundle is NOT the name of a folder or file

answered Feb 20, 2013 at 1:12

stooboo

91610 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nexus23 Over a year ago

Awsome!! Saved my day.

Ricker Silva Over a year ago

I did that but then all css styles got messed. Using default template, for example, home dropdown menús stopped working, clicking doesnot drop anything down.

Francisco Goldenstein Over a year ago

I had a similar problem but in my case I had a dot as part of the name of my bundle (the bundle was named error.handler). After removing the dot from the name of the bundle, it worked like a charm. I hope newer versions of ASP.NET MVC support this or at least warn us about it.

CMS Over a year ago

wow you save me a lot of time, i was luck today to bump in to the correct answer first

DKo · Accepted Answer · 2016-07-06 10:54:04Z

1

Had the same problem. My solution was the invalid name of bundle (it consisted of '_' or '.'). The name needs to be plain text:

bundles.Add(
new StyleBundle("~/Content/bootstrap_Bundle").Include(
    "~/Content/bootstrap/bootstrap-responsive.css",
    "~/Content/bootstrap/bootstrap-editable.css",
    "~/Content/bootstrap/FileUpload.css"));

had to be:

bundles.Add(
new StyleBundle("~/Content/bootstrapBundle").Include(
    "~/Content/bootstrap/bootstrap-responsive.css",
    "~/Content/bootstrap/bootstrap-editable.css",
    "~/Content/bootstrap/FileUpload.css"));

answered Jul 6, 2016 at 10:54

DKo

8801 gold badge10 silver badges20 bronze badges

Comments

danmiser · Accepted Answer · 2015-02-14 16:34:49Z

0

If you're using a product like dot defender, it can give you this error condition, too. When you bundle, if the cache buster parameter contains double dashes, then a product like dot defender sees that as a possible SQL injection attack and ends up interfering with the request/response.

One way to get around this (assuming you can't turn that software off) is to just add something to your original css file, like .dotdefenderbuster {}.

I need to check to see if the bundling algorithm has been updated to allow for influencing of the cache buster key.

For example: http://www.foo.com/MyApp/Content/themes/MyApp/css?v=J9DBkvB7JWRo80eUukDOe3--6DAtA1

answered Feb 14, 2015 at 16:34

danmiser

1,08312 silver badges17 bronze badges

Collectives™ on Stack Overflow

Bundled css not displaying after deploy ... ASP.NET MVC4

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related