Generate external stylesheets

config/webpack.common.js

@@ -120,13 +120,25 @@ module.exports = function (options) {
         },
 
         /*
-         * to string and css loader support for *.css files
+         * to string and css loader support for *.css files (from Angular components)
          * Returns file content as string
          *
          */
         {
           test: /\.css$/,
-          use: ['to-string-loader', 'css-loader']
+          use: ['to-string-loader', 'css-loader'],
+          exclude: [helpers.root('src', 'styles')]
+        },
+
+        /*
+         * to string and sass loader support for *.scss files (from Angular components)
+         * Returns compiled css content as string
+         *
+         */
+        {
+          test: /\.scss$/,
+          use: ['to-string-loader', 'css-loader', 'sass-loader'],
+          exclude: [helpers.root('src', 'styles')]
         },
 
         /* Raw loader support for *.html

config/webpack.dev.js

@@ -84,6 +84,36 @@ module.exports = function (options) {
       libraryTarget: 'var',
     },
 
+    module: {
+
+      rules: [
+
+        /*
+         * css loader support for *.css files (styles directory only)
+         * Loads external css styles into the DOM, supports HMR
+         *
+         */
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+          include: [helpers.root('src', 'styles')]
+        },
+
+        /*
+         * sass loader support for *.scss files (styles directory only)
+         * Loads external sass styles into the DOM, supports HMR
+         *
+         */
+        {
+          test: /\.scss$/,
+          use: ['style-loader', 'css-loader', 'sass-loader'],
+          include: [helpers.root('src', 'styles')]
+        },
+
+      ]
+
+    },
+
     plugins: [
 
       /**

config/webpack.prod.js

@@ -10,6 +10,7 @@ const commonConfig = require('./webpack.common.js'); // the settings that are co
  * Webpack Plugins
  */
 const DefinePlugin = require('webpack/lib/DefinePlugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const IgnorePlugin = require('webpack/lib/IgnorePlugin');
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
 const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
@@ -81,13 +82,53 @@ module.exports = function (env) {
 
     },
 
+    module: {
+
+      rules: [
+
+        /*
+         * Extract CSS files from .src/styles directory to external CSS file
+         */
+        {
+          test: /\.css$/,
+          loader: ExtractTextPlugin.extract({
+              fallbackLoader: 'style-loader',
+              loader: 'css-loader'
+            }),
+          include: [helpers.root('src', 'styles')]
+        },
+
+        /*
+         * Extract and compile SCSS files from .src/styles directory to external CSS file
+         */
+        {
+          test: /\.scss$/,
+          loader: ExtractTextPlugin.extract({
+              fallbackLoader: 'style-loader',
+              loader: 'css-loader!sass-loader'
+            }),
+          include: [helpers.root('src', 'styles')]
+        },
+
+      ]
+
+    },
+
     /**
      * Add additional plugins to the compiler.
      *
      * See: http://webpack.github.io/docs/configuration.html#plugins
      */
     plugins: [
 
+      /**
+       * Plugin: ExtractTextPlugin
+       * Description: Extracts imported CSS files into external stylesheet 
+       *
+       * See: https://github.com/webpack/extract-text-webpack-plugin
+       */
+      new ExtractTextPlugin('[name].[contenthash].css'),
+
       /**
        * Plugin: WebpackMd5Hash
        * Description: Plugin to replace a standard webpack chunkhash with md5.

package.json

@@ -107,6 +107,7 @@
     "css-loader": "^0.26.0",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
+    "extract-text-webpack-plugin": "~2.0.0-beta.4",
     "file-loader": "^0.9.0",
     "gh-pages": "^0.12.0",
     "html-webpack-plugin": "^2.21.0",
@@ -123,11 +124,13 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "1.8.1",
     "ngc-webpack": "^1.0.2",
+    "node-sass": "^4.1.1",
     "npm-run-all": "^4.0.0",
     "parse5": "^3.0.1",
     "protractor": "^4.0.10",
     "raw-loader": "0.5.1",
     "rimraf": "~2.5.4",
+    "sass-loader": "^4.1.1",
     "script-ext-html-webpack-plugin": "^1.3.2",
     "source-map-loader": "^0.1.5",
     "string-replace-loader": "1.0.5",

src/app/app.component.css

@@ -3,6 +3,6 @@ html, body{
   font-family: Arial, Helvetica, sans-serif
 }
 
-span.active {
+a.active {
   background-color: gray;
 }

src/app/app.component.ts

@@ -20,29 +20,18 @@ import { AppState } from './app.service';
   ],
   template: `
     <nav>
-      <span>
-        <a [routerLink]=" ['./'] ">
-          Index
-        </a>
-      </span>
-      |
-      <span>
-        <a [routerLink]=" ['./home'] ">
-          Home
-        </a>
-      </span>
-      |
-      <span>
-        <a [routerLink]=" ['./detail'] ">
-          Detail
-        </a>
-      </span>
-      |
-      <span>
-        <a [routerLink]=" ['./about'] ">
-          About
-        </a>
-      </span>
+      <a [routerLink]=" ['./'] " routerLinkActive="active">
+        Index
+      </a>
+      <a [routerLink]=" ['./home'] " routerLinkActive="active">
+        Home
+      </a>
+      <a [routerLink]=" ['./detail'] " routerLinkActive="active">
+        Detail
+      </a>
+      <a [routerLink]=" ['./about'] " routerLinkActive="active">
+        About
+      </a>
     </nav>
 
     <main>

src/app/app.module.ts

@@ -29,6 +29,9 @@ import { AboutComponent } from './about';
 import { NoContentComponent } from './no-content';
 import { XLargeDirective } from './home/x-large';
 
+import '../styles/styles.scss';
+import '../styles/headings.css';
+
 // Application wide providers
 const APP_PROVIDERS = [
   ...APP_RESOLVER_PROVIDERS,

src/styles/_variables.scss

@@ -0,0 +1 @@
+$nav-button-color: #00838F;

src/styles/headings.css

@@ -0,0 +1,3 @@
+h1 {
+  color: #00BCD4;
+}

src/styles/styles.scss

@@ -0,0 +1,19 @@
+/* this file will be extracted to main dist folder and is imported in index.html */
+/* This file is for setting global styles  */
+@import 'variables';
+
+nav {
+  margin-top: 16px;
+}
+
+nav a {
+  background-color: $nav-button-color;
+  color: white;
+  padding: 8px 16px;
+  margin: 8px;
+  vertical-align: middle;
+  line-height: 1.25;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 4px;
+}