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?

no, the folders could be different locations. How do you add this to your layout page? please provide its code — S.Serpooshan
– S.Serpooshan, Commented Jan 15, 2017 at 7:37
could you check the page source of your site when loaded in browser? does it include proper css files as you referenced in your bundle? e.g: <link href="/lib/css/nivo-slider.css" rel="stylesheet"/> ... — S.Serpooshan
– S.Serpooshan, Commented Jan 15, 2017 at 7:42
what happen if you open that link in your browser? /myBundles/css?v=xt5fim6H60Umm4DuM_5iVudeIEOkrcbgXzG0o3CHtlU1. it seem its optimized to have one css link. Please test if you set debug=true as: <compilation debug="true" targetFramework=.../> in web.config:<configuration><system.web> — S.Serpooshan
– S.Serpooshan, Commented Jan 15, 2017 at 7:58
It opens a css.txt file in notepad. it contains all those css files in one place. — FLICKER
– FLICKER, Commented Jan 15, 2017 at 8:04

S.Serpooshan · Accepted Answer · 2017-01-15 08:49:08Z

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]

I did this, but in HTML it generates multiple reference not only one. in this case what's the point of having bundle?
actually the rendered html is not so important for coder, but the bundles keep your code cleaner and add ability to add selective content in different conditions..

Collectives™ on Stack Overflow

Bundling Style Sheets and Scripts from Different Folders

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related