From 19684f2b7d50076e85b98f2c5f80fb6dd0c59d42 Mon Sep 17 00:00:00 2001
From: SteveSandersonMS <stevesa@microsoft.com>
Date: Tue, 20 Sep 2016 10:06:23 +0100
Subject: [PATCH] In Angular2Spa template, use per-component scoped styles.
 Fixes common config issues like #234.

---
 .../app/components/app/app.component.css      |  6 ++++
 .../app/components/app/app.component.ts       |  3 +-
 .../components/navmenu/navmenu.component.css} | 29 +++++++------------
 .../components/navmenu/navmenu.component.html |  2 +-
 .../components/navmenu/navmenu.component.ts   |  3 +-
 .../Angular2Spa/ClientApp/boot-client.ts      |  3 --
 .../Angular2Spa/Views/Shared/_Layout.cshtml   |  1 -
 templates/Angular2Spa/webpack.config.js       |  9 ++----
 8 files changed, 25 insertions(+), 31 deletions(-)
 create mode 100644 templates/Angular2Spa/ClientApp/app/components/app/app.component.css
 rename templates/Angular2Spa/ClientApp/{styles/site.css => app/components/navmenu/navmenu.component.css} (66%)

diff --git a/templates/Angular2Spa/ClientApp/app/components/app/app.component.css b/templates/Angular2Spa/ClientApp/app/components/app/app.component.css
new file mode 100644
index 0000000..6392600
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/templates/Angular2Spa/ClientApp/app/components/app/app.component.ts b/templates/Angular2Spa/ClientApp/app/components/app/app.component.ts
index f1bd036..01fbf8f 100644
--- a/templates/Angular2Spa/ClientApp/app/components/app/app.component.ts
+++ b/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 {
 }
diff --git a/templates/Angular2Spa/ClientApp/styles/site.css b/templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.css
similarity index 66%
rename from templates/Angular2Spa/ClientApp/styles/site.css
rename to templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.css
index 18a995f..e15c612 100644
--- a/templates/Angular2Spa/ClientApp/styles/site.css
+++ b/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;
diff --git a/templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.html b/templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.html
index 4926cb8..c49d509 100644
--- a/templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.html
+++ b/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>
diff --git a/templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.ts b/templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.ts
index 5941bf5..2b0adc2 100644
--- a/templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.ts
+++ b/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 {
 }
diff --git a/templates/Angular2Spa/ClientApp/boot-client.ts b/templates/Angular2Spa/ClientApp/boot-client.ts
index c46b0fd..017bd0c 100644
--- a/templates/Angular2Spa/ClientApp/boot-client.ts
+++ b/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'];
diff --git a/templates/Angular2Spa/Views/Shared/_Layout.cshtml b/templates/Angular2Spa/Views/Shared/_Layout.cshtml
index 90d892b..799964f 100644
--- a/templates/Angular2Spa/Views/Shared/_Layout.cshtml
+++ b/templates/Angular2Spa/Views/Shared/_Layout.cshtml
@@ -6,7 +6,6 @@
         <title>@ViewData["Title"] - WebApplicationBasic</title>
         <base href="/" />
         <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
-        <link rel="stylesheet" href="~/dist/styles.css" asp-append-version="true" />
     </head>
     <body>
         @RenderBody()
diff --git a/templates/Angular2Spa/webpack.config.js b/templates/Angular2Spa/webpack.config.js
index 5ed8730..fe33c35 100644
--- a/templates/Angular2Spa/webpack.config.js
+++ b/templates/Angular2Spa/webpack.config.js
@@ -1,9 +1,7 @@
 var path = require('path');
 var webpack = require('webpack');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 var isDevBuild = process.env.ASPNETCORE_ENVIRONMENT === 'Development';
-var extractCSS = new ExtractTextPlugin('styles.css');
 
 module.exports = {
     devtool: isDevBuild ? 'inline-source-map' : null,
@@ -11,9 +9,9 @@ module.exports = {
     entry: { main: ['./ClientApp/boot-client.ts'] },
     module: {
         loaders: [
-            { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader?silent=true' },
-            { test: /\.html$/, loader: 'raw-loader' },
-            { test: /\.css/, loader: extractCSS.extract(['css']) }
+            { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
+            { test: /\.html$/, include: /ClientApp/, loader: 'raw' },
+            { test: /\.css/, include: /ClientApp/, loader: 'raw' }
         ]
     },
     output: {
@@ -22,7 +20,6 @@ module.exports = {
         publicPath: '/dist/'
     },
     plugins: [
-        extractCSS,
         new webpack.DllReferencePlugin({
             context: __dirname,
             manifest: require('./wwwroot/dist/vendor-manifest.json')