How to add css files in asp.net mvc4 project. I have 3 css files like this
images/img.css
content/con.css
styles.css
i added in bundleconfig.vb but its not working.
bundles.Add(New StyleBundle("~/Content/css").Include("~/images/img.css"))
bundles.Add(New StyleBundle("~/Content/css").Include("~/content/con.css"))
bundles.Add(New StyleBundle("~/Content/css").Include("~/styles.css"))
In view page
<%: Styles.Render("~/Content/css") %>
<%: Scripts.Render("~/bundles/modernizr") %>
Try this :
bundles.Add(New StyleBundle("~/AllStyles").IncludeDirectory("~/images","img.css")_
.IncludeDirectory("~/content","con.css")_
.Include("~/styles.css"))
In your view Page:
<%: Styles.Render("~/AllStyles") %>
or
bundles.Add(New StyleBundle("~/bundles/img").Include("~/images/img.css"))
bundles.Add(New StyleBundle("~/bundles/content").Include("~/content/con.css"))
bundles.Add(New StyleBundle("~/bundles/style").Include("~/styles.css"))
In your view Page:
<%: Styles.Render("~/bundles/img","~/bundles/content","~/bundles/style") %>
And remind that you must add in the Global.asax.vb file this BundleConfig.RegisterBundles(BundleTable.Bundles);
Correct way to include multiple css/js into a single bundle:
bundles.Add(New StyleBundle("~/Content/css").Include(
"~/images/img.css",
"~/content/con.css",
"~/styles.css"))
What your origin code did is registering 3 bundles overwriting each other and after all only 1 css get included.
Yes, you must register the bundles in your application.
(this is for c# but very similar code to vb)
Global.asax.cs :
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
// Register the bundles
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
BundleConfig.cs :
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~bundles/someCss").Include(
"~/css/myothercssfile.css*",
"~/css/mycss.css*"
));
}
And this code in your view :
<%: Styles.Render("~/bundles/someCss") %>
