In Angular2Spa template, use per-component scoped styles. Fixes common config issues like #234.

templates/Angular2Spa/ClientApp/app/components/app/app.component.css

@@ -0,0 +1,6 @@
+@media (max-width: 767px) {
+    /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
+    .body-content {
+        padding-top: 50px;
+    }
+}

templates/Angular2Spa/ClientApp/app/components/app/app.component.ts

@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'app',
-    template: require('./app.component.html')
+    template: require('./app.component.html'),
+    styles: [require('./app.component.css')]
 })
 export class AppComponent {
 }

templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.css

@@ -1,18 +1,11 @@
-@media (max-width: 767px) {
-    /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
-    .body-content {
-        padding-top: 50px;
-    }
-}
-
-.main-nav li .glyphicon {
+li .glyphicon {
     margin-right: 10px;
 }
 
 /* Highlighting rules for nav menu items */
-.main-nav li.link-active a,
-.main-nav li.link-active a:hover,
-.main-nav li.link-active a:focus {
+li.link-active a,
+li.link-active a:hover,
+li.link-active a:focus {
     background-color: #4189C7;
     color: white;
 }
@@ -32,31 +25,31 @@
         height: 100%;
         width: calc(25% - 20px);
     }
-    .main-nav .navbar {
+    .navbar {
         border-radius: 0px;
         border-width: 0px;
         height: 100%;
     }
-    .main-nav .navbar-header {
+    .navbar-header {
         float: none;
     }
-    .main-nav .navbar-collapse {
+    .navbar-collapse {
         border-top: 1px solid #444;
         padding: 0px;
     }
-    .main-nav .navbar ul {
+    .navbar ul {
         float: none;
     }
-    .main-nav .navbar li {
+    .navbar li {
         float: none;
         font-size: 15px;
         margin: 6px;
     }
-    .main-nav .navbar li a {
+    .navbar li a {
         padding: 10px 16px;
         border-radius: 4px;
     }
-    .main-nav .navbar a {
+    .navbar a {
         /* If a menu item's text is too long, truncate it */
         width: 100%;
         white-space: nowrap;

templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.html

@@ -1,5 +1,5 @@
 <div class='main-nav'>
-        <div class='navbar navbar-inverse'>
+    <div class='navbar navbar-inverse'>
         <div class='navbar-header'>
             <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                 <span class='sr-only'>Toggle navigation</span>

templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.ts

@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'nav-menu',
-    template: require('./navmenu.component.html')
+    template: require('./navmenu.component.html'),
+    styles: [require('./navmenu.component.css')]
 })
 export class NavMenuComponent {
 }

templates/Angular2Spa/ClientApp/boot-client.ts

@@ -2,10 +2,7 @@ import 'angular2-universal-polyfills/browser';
 import { enableProdMode } from '@angular/core';
 import { platformUniversalDynamic } from 'angular2-universal';
 import { AppModule } from './app/app.module';
-
-// Include styles in the bundle
 import 'bootstrap';
-import './styles/site.css';
 
 // Enable either Hot Module Reloading or production mode
 const hotModuleReplacement = module['hot'];