CSS bundle is empty when EnableOptimizations is true

Question

I am creating a style bundle:

bundles.Add(new StyleBundle("~/content/bundled-styles.css").Include(
    "~/content/flexisel-style.css"));

... and in my view:

@Styles.Render("~/content/bundled-styles.css")

If I view my page without optimizations enabled (i.e. BundleTable.EnableOptimizations = false;) then everything works fine. My .css file gets added to the page without any problems and it contains all the styles.

If I set BundleTable.EnableOptimizations = true; (without changing anything else) then the generated .css bundle doesn't contain any styles. The bundled .css file is added to the page along with the generated token but when I click on the .css file from the page source, it is completely blank. My page then is obviously rendered without any styling.

Additional information:

• I do not have a file or a folder called "bundled-styles.css" in my content folder
• This is the only bundle I am adding.
• I am not receiving any error (like a 404). The .css file is simply empty.
• I am using ASP.NET MVC 5.

Answer 1

I just had this issue as well. It seems as if the bundler did not like the extension in the name. Once I removed the extension, the bundler started to work.

You might try doing the following. Notice I've removed the .css in two places.

Remove the .css

bundles.Add(new StyleBundle("~/content/bundled-styles").Include(
    "~/content/flexisel-style.css"));

---

@Styles.Render("~/content/bundled-styles")

Answer 2

I was stuck on this for a very long time, i was trapped by the following:

that if the key you’re using for your bundle, in this case “~/scripts”, matches the virtual path of the file included in the bundle, then it will not be included. To fix this, I changed the key to “~/bundles/scripts” and everything is happy now.

Credits: https://samrueby.com/2015/03/05/asp-net-mvc-bundleconfig-scripts-returning-an-empty-response/