[SOLVED] Cannot get Metro 3.0.13 to display in ASP.NET 5 MVC View

Cannot get Metro 3.0.13 to display in ASP.NET 5 MVC View

I have downloaded the Metro CSS via Bower by including it in the Bower.json file:

"metro-ui-css": "3.0.13"

This appears to install the Metro stuff under /wwwroot/lib/metro-ui-css/build/css and also /fonts and /less folders. I have included the following references in my _Layout.cshtml file:

<environment names="Development">
<link rel="stylesheet" href="~/lib/metro-ui-css/build/css/metro.css">

And under the <head> section::

<environment names="Development">
<script src="~/lib/metro-ui-css/build/js/metro.js"></script>

But no matter which Metro class I try to include in a View .cshtml file the Classes will not appear. Any idea what I am doing wrong and how I can get them to display?

Many thanks

Solution

Create a new Bundle

In the 'App_Start' folder of your solution, find the 'BundleConfig.cs' file and open it. Here you can add a new bundle, for example:

bundles.Add(new ScriptBundle("~/bundles/metroJs").Include(
                "~/Scripts/metroJs.js"));

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

Your paths to the .js and .css files may be different, however this may also be correct.

Once you've done that, go back to your '_Layout.cshtml' file and at the bottom you'll more than likely already have some '@Scripts.Render()'. Just add one with the name of the new bundle you just created like so:

@Scripts.Render("~/bundles/metroJs")
@Styles.Render("~/Content/metroJs")