When we define our own bundles we do in Bundle.Config, and when we are working in a team and using SVNs but still there are problems that developers can't make the files synch. To avoid this I want to bunlde the js and css in the separate file or even on the page.
I tried this:
BundleCollection bundles = new BundleCollection(); bundles.Add(new
ScriptBundle("~/bundles/LogInJs").Include(
"~/resources/Scripts/jquery-{version}.js",
"~/resources/Scripts/jquery.validate*",
"~/resources/Scripts/customJs/bootstrap.min.js"
}
bundles.Add(new StyleBundle("~/bundles/LoginStyle").Include(
"~/resources/Style/customCss/bootstrap.css",
"~/resources/Style/customCss/font-awesome.min.css"
}
But its not working, I am sure I am doing something wrong here. any thoughts or suggestions please.
Related
i have the following bunlde inside my asp.net mvc5 web application:-
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/style.css",
"~/Content/touchTouch.css",
"~/fonts/font-awesome.css"));
now will this always render the style.css after the bootstrap.css ? or this is not guaranteed ? if the order is not guaranteed in the above code then how i can control the order of the css and script files inside the bundle ?
No. I't won't always render style.css after the bootstrap.css.
If you want ordering, you have to make this (for scripts) and this (for CSS files) change to specifically give them an order.
I understand the links are old (from 2012), but I have used that with success in ASP .NET MVC 5.
ASP.NET MVC has a default order for certain files. For ex, it tries to load jQuery first. You can clear up that list this way:
bundles.FileSetOrderList.Clear();
That worked for me. If it doesn't work for you, you can explicitly indicate the order in which files should be processed in your bundles:
bundles.FileSetOrderList.Clear();
BundleFileSetOrdering ordering = new BundleFileSetOrdering("custom order");
ordering.Files.Add("jquery.js");
bundles.FileSetOrderList.Add(ordering);
Suppose I have a directory with multiple css files. Is there a way to create and reference multiple ASP bundles for the same directory?
Let's say you have a folder with several stylesheets.
I know you can include specific files by their virtual paths like this:
//Bundle1
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css"));
What if I add another bundle, and this one includes stylesheets that are in the same directory as the previous bundle?
//Bundle2
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
Now that I've created the bundles, I want to reference them.
I know I can call the following if there was just one bundle for the directory
#Styles.Render("~/Content/themes/base/css", "~/Content/css")
The problem I'm having with Styles.Render though is that it only accepts a virtual path to a path. Lets say you create more than one bundle in the same directory (if that is even possible). You can't use Styles.Render to select which bundle you want. You can only give it a path. Is there another way to reference a bundle you create in BundleConfig without Styles.Render?
Or is Styles.Render is the only way to reference any style bundle in the HTML?
Are you allowed to create seperate ASP bundles for resources in the
same directory?
Yes
How would I reference these bundles with the Styles.Render method?
#Styles.Render("~/Content/CssBundle1")
#Styles.Render("~/Content/CssBundle2")
The important thing to illustrate here is the reasoning behind bundling and the intended use of it. Bundling exists to reduce the number of requests and improve the load time of your application. You could do this manually, but you would have spaghetti code to manage. The bundling is there to keep everything modularized and easily organized.
Where I think there might be confusion
StyleBundle("~/Content/magicaunicornsdacningonrainbowsthisnameisrelative")
When you create a bundle, the virtual path can be named whatever you want. You bundle it in categories that makes sense.
//Bundle1
bundles.Add(new StyleBundle("~/Content/pets").Include(
"~/Content/dog",
"~/Content/cat",
//Bundle2
bundles.Add(new StyleBundle("~/Content/cities").Include(
"~/Content/memphis.css",
"~/Content/bejing.css",
//Bundle3
bundles.Add(new StyleBundle("~/Content/people").Include(
"~/Content/joseph.css",
"~/Content/michael.css",
With the bundles created, you make sure to call the bundles in the order you need them, loading only what is needed for each page.
#Styles.Render("~/Content/pets", "~/Content/cities")
* LOTS OF STUFF LOADED HERE! BUT YOU DO NOT NEED THE PEOPLE BUNDLE RIGHT AWAY *
#Styles.Render("~/Content/people")
You would simply create a different bundle for that references all the needed files, and you would call that bundle as needed. If you need to break up the order in which a file renders scripts or styles then you have multiple bundles. MVC is a lot about proper modularization, so you're always working up towards a root or singularity.
Getting more advanced
Obviously you can kick it up a notch. The next steps include using .less or .sass preprocessors for your style bundles. Those will help with very detailed modularization. Next, you can start using variables and conditions to determine which bundles should be run, linked below.
Or is Styles.Render is the only way to reference any style bundle in
the HTML?
There are other ways to reference css files via code. For instance, you could write a simple for loop to accomplish the task of writing the needed css scripts. Additionally, you could use razor variables.
Resource
Variables in Styles.Render
http://www.asp.net/mvc/overview/performance/bundling-and-minification
I posted last year on the same issue. here
But this time I did same as previous but I am having error different. Now font is looking root level like this.
http://www.dev.com/Content/font-awesome-4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0
config
bundles.Add(new StyleBundle("~/content/specss").Include(
"~/Content/bootstrap.css",
"~/Content/Css/site.css",
"~/Content/Css/sidenav.css",
"~/Content/overlay.css").Include("~/Content/font-awesome-4.3.0/css/font-awesome.css",
new CssRewriteUrlTransform()));
but it suppose to look at http://www.dev.com/iapps/ebiz/Content/font-awesome-4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0 other bootstrap and else working fine.
On my current project, I have mine set up as:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/font-awesome/css/font-awesome.css"));
I'm not familiar with the CssRewriteUrlTransform class, but I just include my font awesome css right in the same Include method as the other css sheets.
The only way i found is to recompile the css with less or scs, according to font-awesome documentation http://fontawesome.io/get-started/.
In my opinion, using StyleBundle and CssRewriteUrlTransform is a more flexible approach, but it seems that this is impossible for latest versions (i'm using the 4.7.0).
I created a ASP.NET forms site as a sandbox and I used NuGet to add Bootstrap, which I'm just now learning. I wanted to change the theme, so I downloaded a theme and renamed the minimized file as theme1-bootstrap.min.css. If I simply replace the existing boostrap.min.css, everything works as expected.
However, I was thinking (possibly incorrectly) that it this is not a good idea, that its better to load my themed bootstrap.min.css after the original bootstrap.min.css. This is what the reference I'm using does with a statement in an html file.
But the ASP.NET project is a bit different then the html reference I'm using, and I can't find any statements anywhere. I'm figuring it has something to do with Bundle.config or the line in the site.master
<webopt:bundlereference runat="server" path="~/Content/css" />
I'd appreciate just knowing what's going on and what's the best practice for applying my theme. Thanks.
Take a look at ~/AppStart/BundleConfig.cs:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
This means that Web Optimization will search for files bootstrap.css and site.css as it is or with .min suffix.
So if you need to add theme1-bootstrap.min.css to the bundle - you need to extend it like this:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/theme1-bootstrap.css"));
I have this:
bundles.Add(new StyleBundle("~/Content/Styles/Default").Include("~/Content/Styles/Default/Site.css"));
On my sites i have this:
#section Styles
{
#Styles.Render("~/Content/Styles/Default"))
}
My _Layout.cshtml looks like this:
#RenderSection("Styles", true)
Everything looks good, eh? Well, not really. When i compiled my application in release mode, decided to publish it, this is what it renders:
<link href="/Content/Styles/Default?v=78dkNySP_xsiuzsgxCx_GGnnHzYS-B8nNdnXqcl47XI1" rel="stylesheet">
Instead of generating href to a file, it generates some kind of id? Guid? Why? O.o
This is how bundles work. It's main purpose is for you to combine multiple CSS (and JS files for that matter) files into one package. e.g. you no longer have to put all your css (and js) into one huge file. Just split it up into sections, then add it into your bundles, and it packages it up into one item. Less web requests, the faster your page load time.
e.g. Lets say you had 2 css files. One's the main, but you had one for your menu system.
bundles.Add(new StyleBundle("~/Content/Styles/Default").Include(
"~/Content/Styles/Default/Site.css",
"~/Content/Styles/Default/Menu.css"));
This would show up as a single call with the GUID type code (to prevent caching on file changes) on the URL. This URL will link to a minified and bundled css.
But my browser cannot read that! There is no physical path to a file!
It's a sort of virtual file. MVC's bundling uses the routing engine to point it to a combined and minified version of a particle bundle.