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 change
@@ @@ -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;
 + }
 +}
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`	`exportclassAppComponent{`
`8`	`9`	`}`
-Original file line number
+Diff line change
@@ @@ -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-navli .glyphicon{
 +li .glyphicon{
 margin-right:10px;
+}
 /* Highlighting rules for nav menu items */
 -.main-navli.link-activea,
 -.main-navli.link-activea:hover,
 -.main-navli.link-activea:focus{
 +li.link-activea,
 +li.link-activea:hover,
 +li.link-activea:focus{
 background-color:#4189C7;
 color: white;
+}
 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 .navbarul{
 + .navbarul{
 float: none;
+ }
 - .main-nav .navbarli{
 + .navbarli{
 float: none;
 font-size:15px;
 margin:6px;
+ }
 - .main-nav .navbarlia{
 + .navbarlia{
 padding:10px16px;
 border-radius:4px;
+ }
 - .main-nav .navbara{
 + .navbara{
 /* If a menu item's text is too long, truncate it */
 width:100%;
 white-space: nowrap;
-Original file line number
+Diff line change
@@ @@ -1,5 +1,5 @@ @@
 <divclass='main-nav'>
 -<divclass='navbar navbar-inverse'>
 +<divclass='navbar navbar-inverse'>
 <divclass='navbar-header'>
 <buttontype='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
 <spanclass='sr-only'>Toggle navigation</span>
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`	`exportclassNavMenuComponent{`
`8`	`9`	`}`
-Original file line number
+Diff line change
 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
 consthotModuleReplacement=module['hot'];
-Original file line number
+Diff line change
@@ @@ -1,19 +1,17 @@ @@
 varpath=require('path');
 varwebpack=require('webpack');
 -varExtractTextPlugin=require('extract-text-webpack-plugin');
 varisDevBuild=process.env.ASPNETCORE_ENVIRONMENT==='Development';
 -varextractCSS=newExtractTextPlugin('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: {
 publicPath: '/dist/'
 },
 plugins: [
 -extractCSS,
 newwebpack.DllReferencePlugin({
 context: __dirname,
 manifest: require('./wwwroot/dist/vendor-manifest.json')