CODEWITHSUNDEEP
asp.net-mvcvb.netasp.net-mvc-4
Er Mayank
Er Mayank

Reputation: 1073

How to add custom css files to asp.net mvc?

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") %>

Upvotes: 5

Views: 15319

Answers (3)

Jason Roell
Jason Roell

Reputation: 6819

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") %>

Upvotes: 0

user3383479
user3383479

Reputation:

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);

Upvotes: 8

tweray
tweray

Reputation: 1003

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.

Upvotes: 1

Related Questions