Merge pull request #12 from Tynarus/global-stylesheet

Global stylesheet

config/build/webpack.common.js

@@ -27,8 +27,12 @@ module.exports = {
             },
             {
                 test: /\.scss$/,
-                exclude: /node_modules/,
-                use: [ 'raw-loader', 'css-loader', 'sass-loader' ]
+                exclude: [ /node_modules/, helpers.root('src', 'global.scss') ],
+                use: [ 'raw-loader', 'sass-loader' ]
+            },
+            {
+                test: helpers.root('src', 'global.scss'),
+                use: [ 'style-loader', 'css-loader', 'sass-loader' ]
             },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|otf|ttf|eot|ico)$/,

package.json

@@ -57,7 +57,7 @@
         "raw-loader": "^0.5.1",
         "reflect-metadata": "^0.1.10",
         "sass-loader": "^6.0.6",
-        "style-loader": "^0.13.1",
+        "style-loader": "^0.18.2",
         "tslint": "~5.7.0",
         "typescript": "~2.5.2",
         "webpack": "~3.4.1",

src/app/app.component.html

@@ -1,4 +1,6 @@
 <div class="tyn-app">
+    <h1>App!</h1>
+
     <main>
         <router-outlet></router-outlet>
     </main>

src/app/app.component.scss

@@ -1,14 +1,5 @@
 @import "../constants";
 
-html, body, h1 {
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    background-color: $primary-bg;
-    color: #ffffff;
-    font-family: $primary-font;
-    font-size: $primary-font-size;
-    padding: 20px;
+h1 {
+	color: purple;
 }

src/app/app.component.ts

@@ -1,10 +1,9 @@
-import { Component, OnInit, ViewEncapsulation } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 
 @Component({
     selector: "tyn-app",
     templateUrl: './app.component.html',
-    styleUrls: [ "./app.component.scss" ],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: [ "./app.component.scss" ]
 })
 export class AppComponent implements OnInit {
 

src/constants.scss

@@ -3,7 +3,7 @@
 $primary-color: #0064ff;
 $primary-color-light: #3f86ff;
 
-$primary-bg: #373737;
+$primary-bg: #ffffff;
 $primary-content-bg: #4b4b4b;
 
 $primary-font: Tahoma, Arial, sans-serif;

src/global.scss

@@ -0,0 +1,12 @@
+/**
+ * Global Application Styles
+ */
+
+@import "constants";
+
+body {
+	background-color: $primary-bg;
+	color: $primary-color;
+	font-family: $primary-font;
+	font-size: $primary-font-size;
+}