Bundling Style Sheets and Scripts from Different Folders

Question

In ASP.NET MVC5 application, I have multiple CSS and JS files that I'm trying to bundle them using below code

bundles.Add(new StyleBundle("~/myBundles/css").Include(
          "~/lib/css/nivo-slider.css",
          "~/css/core.css",
          "~/css/shortcode/shortcodes.css",
          "~/style.css",
          "~/css/responsive.css",
          "~/css/color/color-core.css",
          "~/css/custom.css",
          "~/myDefaultSS.css"
          ));

I use it in _Layout page like this:

@Styles.Render("~/myBundles/css")

When using it, I see below in the hmlt source of my page

<link href="/myBundles/css?v=xt5fim6H60Umm4DuM_5iVudeIEOkrcbgXzG0o3CHtlU1" rel="stylesheet"/>

After using this, my web pages are not showing properly. I think it's because I am bundling files from different directories. Is that right? How can I resolve the issue?

Answer 1

Don’t use @import css directives when bundling styles. If you publish a release build of your site it didn't work. If you inspect the network traffic [F12], you see the imported css file is not found on the network, because optimization don't replace @import url with the correct path.

So, Don’t use bundling with imported css-files OR turn off bundling optimization and optimize them by another way.

Optimization can be turned off by the following line in Web.Config:

<compilation debug="true" targetFramework="4.5"/>

Also, you can use this code in C#:

BundleTable.EnableOptimizations = false;

[Reference]