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

SteveSandersonMS · SteveSandersonMS · commit 19684f2b7d50 · 2016-09-20T10:06:23.000+01:00
diff --git a/templates/Angular2Spa/ClientApp/app/components/app/app.component.css 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
@@ -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/app/components/navmenu/navmenu.component.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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,19 +1,17 @@
 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,
     resolve: { extensions: [ '', '.js', '.ts' ] },
     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')

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,8 @@ import { Component } from '@angular/core';`
`2`	`2`
`3`	`3`	`@Component({`
`4`	`4`	`selector: 'app',`
`5`		`- template: require('./app.component.html')`
	`5`	`+ template: require('./app.component.html'),`
	`6`	`+ styles: [require('./app.component.css')]`
`6`	`7`	`})`
`7`	`8`	`export class AppComponent {`
`8`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,8 @@ import { Component } from '@angular/core';`
`2`	`2`
`3`	`3`	`@Component({`
`4`	`4`	`selector: 'nav-menu',`
`5`		`- template: require('./navmenu.component.html')`
	`5`	`+ template: require('./navmenu.component.html'),`
	`6`	`+ styles: [require('./navmenu.component.css')]`
`6`	`7`	`})`
`7`	`8`	`export class NavMenuComponent {`
`8`	`9`	`}`