Why are my style bundles not rendering correctly in ASP.NET MVC 4?

Question

So I am new to ASP.NET MVC 4 (well, I used 3 a little).

Anyway, in my BundleConfig.cs file, I am trying to load the Twitter Bootstrap css files and an additional site.css file.

But only the site.css file is rendered. I have confirmed that the bootstrap css files are indeed in the right place (Content folder) and are in the same location as the site.css

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

EDIT

OK, this isn't my preferred way but Andrei Drynov recommended I try:

@import url("bootstrap.min.css")
body{background: #e8e6da;padding-top:60px;padding-bottom:40px;}
@import url("bootstrap-responsive.min.css")

But that doesn't work. I changed the site.css to the above but now the background body color doesn't even work. If I remove the @imports the background is the correct color.

EDIT 2

I don't get it but adding:

bundles.IgnoreList.Clear();

To my bundles file fixed it. Hmmm. Not sure I understand. But I was able to remove the @imports out of the site.css.

Strange.

If you look at the Network tab in developer tools, are those CSS files obtained? — Andrei Drynov
– Andrei Drynov, Commented Sep 21, 2012 at 15:36
I have bundles.IgnoreList.Clear() in RegisterBundles. Interesting, thought it was for ScriptBundles... — Andrei Drynov
– Andrei Drynov, Commented Sep 21, 2012 at 16:16

paul · Accepted Answer · 2012-11-25 22:08:54Z

87

The default behaviour is for the IgnoreList to ignore any minified scripts.

You can either remove the '.min' from their names, or clear the IgnoreList.

answered Nov 25, 2012 at 22:08

paul

22.1k1 gold badge56 silver badges54 bronze badges

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

1 Comment

Josh M. Over a year ago

This is the correct answer. Bundles will automatically use the minified version, so don't include that in the script name, just use bootstrap.css instead, and keep the un-minified version in your content directory.

Steve Johnson · Accepted Answer · 2013-02-09 16:56:10Z

15

Just to let anybody else know who cant find a working solution easily in this long thread, I had the exact same issue and i solved it in the same way as suggested in edits found at the bottom of the actual question!

I started a new project MVC4 Web Application, created routes for bootstrap bundles in the exact same code shown above:

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

But due to unknown reasons, it was not loading.. Finally i gave up and decided to google it and found this page.

I tried adding the following as the first line in BundleConfig.cs file. Recompiled and everything started working and now the styles were correctly being loaded now.

bundles.IgnoreList.Clear();

Maybe this helps somebody.

answered Feb 9, 2013 at 16:56

Steve Johnson

3,1647 gold badges48 silver badges72 bronze badges

2 Comments

JLRishe Over a year ago

This would be consistent with Paul's answer above which states that .min files are ignored by default. He also suggests either clearing the IgnoreList or renaming the files to remove the .min.

user330606 Over a year ago

Thx a LOT! IgnoreList was the reason... Why?

Andrei Drynov · Accepted Answer · 2012-09-21 16:19:44Z

2

I don't use bundles for Bootstrap (as an exception), but its minified versions, so this works for me:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>@ViewBag.Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="@Url.Content("~/Content/bootstrap.min.css")">
    <style>
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
    </style>
    <link rel="stylesheet" href="@Url.Content("~/Content/bootstrap-responsive.min.css")">
    @Styles.Render("~/Content/less")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>

The part with the inline style is from http://www.initializr.com/ for the top NavBar, if you don't need it, just remove.

Alternatively, you can do the same in your styles.css file:

@import url('bootstrap.min.css');

body {
    padding-top: 60px;
    padding-bottom: 40px;
}

@import url('bootstrap-responsive.min.css');

You CSS Code below

edited Sep 21, 2012 at 16:19

answered Sep 21, 2012 at 15:41

Andrei Drynov

8,5926 gold badges43 silver badges39 bronze badges

5 Comments

cbmeeks Over a year ago

Well that certainly works but I was hoping to use the bundles. I really like the idea of using bundles. Feels 'Rails like' to me. :-)

cbmeeks Over a year ago

On your update...importing it into the site.css is even better. I will use that method unless someone can show me how to use it in the bundle.

webdeveloper Over a year ago

@cbmeeks Bundle depend on debug mode, also it has ignore list.

cbmeeks Over a year ago

Looks like the ignore list was it??? bundles.IgnoreList.Clear(); fixed it. Post this as an answer and I will award it to you. But I still don't know why that fixed it?

Hao Kung Over a year ago

There's a bug in that by default when in debug mode, *.min.js will be ignored.

Community · Accepted Answer · 2017-05-23 12:26:10Z

1

As paul correctly stated, bundles as set to automatically ignore 'min' files. But ignoring this rule all together is a bad practice, please refer to this answer Bundler not including .min files to a better solution (check both first and second answers).

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Dec 31, 2013 at 9:29

FredericoR

735 bronze badges

Collectives™ on Stack Overflow

Why are my style bundles not rendering correctly in ASP.NET MVC 4?

4 Answers 4

1 Comment

2 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related