Styles.Render in MVC4

Question

In a .NET MVC4 project how does @Styles.Render works?

I mean, in @Styles.Render("~/Content/css") which file is it calling?

I dont have a file or a folder called "css" inside my Content folder.

see my http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification tutorial — RickAndMSFT, Aug 19 '12 at 17:57

score 464 · Accepted Answer · edited Jan 25 '13 at 10:28

464

It's calling the files included in that particular bundle which is declared inside the BundleConfig class in the App_Start folder.

In that particular case The call to @Styles.Render("~/Content/css") is calling "~/Content/site.css".

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

edited Jan 25 '13 at 10:28

Community

1
1

answered Aug 19 '12 at 17:27

NunoCarmo

5,479
2
19
15

23

One thing to know is that it will not add a .css file that is already minimized to the bundle. Example: it does not work with bootstrap.min.js, only with bootstrap.js. I hope this can help others. – codea May 29 '14 at 17:13
5

This is talking about styles, not scripts. If you want to use bootstrap.min.js, just create a bundle like this: bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.min.js")); – Xcalibur37 Jul 11 '15 at 21:40
1

@codea I'm not sure what is your set-up, but by default bundler will take `*.min.*` over `*.*` files. – skmasq Jan 27 '16 at 09:38
@skmasq, at the time of writing these lines, I was using VS2013. Things may have changed until now. Thanks for mentioning that :) – codea Jan 27 '16 at 12:17
I dont get it....why go to all the trouble to create bundles and add those paths to these crazy classes in MVC when you can simply add a CSS to the file in your web page? If you add all your CSS links to your style sheets in say a layout file or a partial view you can manage them in one simple place, as well. This is also bad design to hard code Style paths like that, as you can no longer create CSS skins which was the whole purpose of the CSS system when it was designs 20 years ago. – Stokely Jun 30 '17 at 19:54
I know this is a really old comment to be replying to but what the heck: For every tag your browser processes, it opens a new connection to the server. This is in addition to every image, script, etc. request. There are limits to these things on both ends of the equation so, to my understanding, not only does bundling add minification to the process for Prod deployments but it also reduces connection setup and teardown. All of this should improve performance. – Newclique Jul 03 '19 at 17:21

linktoemi · Answer 2 · 2013-05-21T15:12:47.500

34

Watch out for case sensitivity. If you have a file

/Content/bootstrap.css

and you redirect in your Bundle.config to

.Include("~/Content/Bootstrap.css")

it will not load the css.

edited May 21 '13 at 15:12

answered Apr 30 '13 at 13:28

linktoemi

397
3
10

Also: The second include is spelled differently. – Dan Esparza May 21 '13 at 13:32
1

is there support for sass/less-files, too? – Manticore Nov 17 '15 at 10:04

score 16 · Answer 3 · answered Dec 17 '17 at 18:32

A bit late to the party. But it seems like no one has mentioned
bundling & minification of StyleBundle, so..

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

calls in Application_Start():

BundleConfig.RegisterBundles(BundleTable.Bundles);

which in turn calls

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/Site.css"));
}

RegisterBundles() effectively combines & minifies bootstrap.css & Site.css
into a single file,

<link href="/Content/css?v=omEnf6XKhDfHpwdllcEwzSIFQajQQLOQweh_aX9VVWY1" rel="stylesheet">

But..

<system.web>
  <compilation debug="false" targetFramework="4.6.1" />
</system.web>

only when debug is set to false in Web.config.
Otherwise bootstrap.css & Site.css will be served individually.
Not bundled, nor minified:

<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/Site.css" rel="stylesheet">

score 0 · Answer 4 · edited Sep 18 '13 at 19:57

0

src="@url.content("~/Folderpath/*.css")" should render styles

edited Sep 18 '13 at 19:57

nhahtdh

55,989
15
126
162

answered Sep 18 '13 at 19:49

Ram

11
2

score 0 · Answer 5 · edited Jan 29 '15 at 20:32

0

As defined in App_start.BundleConfig, it's just calling

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

Nothing happens even if you remove that section.

edited Jan 29 '15 at 20:32

Jason Sturges

15,855
14
59
80

answered Sep 15 '14 at 12:42

Sathish Dadi

1
1

score 0 · Answer 6 · answered Jun 30 '17 at 20:10

Polo I wouldn't use Bundles in MVC for multiple reasons. It doesn't work in your case because you have to set up a custom BundleConfig class in your Apps_Start folder. This makes no sense when you can simple add a style in the head of your html like so:

<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/bootstrap.theme.css" />

You can also add these to a Layout.cshtml or partial class that's called from all your views and dropped into each page. If your styles change, you can easily change the name and path without having to recompile.

Adding hard-coded links to CSS in a class breaks with the whole purpose of separation of the UI and design from the application model, as well. You also don't want hard coded style sheet paths managed in c# because you can no longer build "skins" or separate style models for say different devices, themes, etc. like so:

<link rel="stylesheet" href="~/UI/Skins/skin1/base.css" />
<link rel="stylesheet" href="~/UI/Skins/skin2/base.css" />

Using this system and Razor you can now switch out the Skin Path from a database or user setting and change the whole design of your website by just changing the path dynamically.

The whole purpose of CSS 15 years ago was to develop both user-controlled and application-controlled style sheet "skins" for sites so you could switch out the UI look and feel separate from the application and repurpose the content independent of the data structure.....for example a printable version, mobile, audio version, raw xml, etc.

By moving back now to this "old-fashioned", hard-coded path system using C# classes, rigid styles like Bootstrap, and merging the themes of sites with application code, we have gone backwards again to how websites were built in 1998.

Yes. Why are developers in 2019 minimizing css and javascript but then building API's like Angular and others that send megabytes of unnecessary ECMAScript (Javascript) to clients? We used to send less code or compressed code to customers with limited bandwidth so they could get the code when they were constrained by bandwidth.... i.e. 14k baud modems. We have 5G coming so code compression like gif compression or minification isnt needed. Yet we have gone backwards sending huge chucks of scripts to clients as a result. So why minimize anything? — Stokely, Sep 26 '19 at 16:32
Because we should be sending as little over the wire as we possible can? I certainly try to keep things to a minimum. — Scott Fraley, Sep 27 '19 at 22:32
If nothing else, minify for eco-friendliness since less data on the wiring means less electricity, less equipment, less storage, less everything and more green centric consciouness — bkqc, Jul 17 '23 at 17:22

score 0 · Answer 7 · answered Aug 31 '18 at 15:46

I did all things necessary to add bundling to an MVC 3 web (I'm new to the existing solution). Styles.Render didn't work for me. I finally discovered I was simply missing a colon. In a master page: <%: Styles.Render("~/Content/Css") %> I'm still confused about why (on the same page) <% Html.RenderPartial("LogOnUserControl"); %> works without the colon.

score 0 · Answer 8 · answered Nov 04 '20 at 18:04

0

Set this to False on your web.config

<compilation debug="false" targetFramework="4.6.1" />

answered Nov 04 '20 at 18:04

delphiman

25
6

Styles.Render in MVC4

8 Answers8

Linked