url resolution in css files, global css support and sass support at separate branch

.gitignore

@@ -52,6 +52,7 @@ npm-debug.log
 /src/*/dist/
 /dist/**
 .webpack.json
+*.bak
 
 # Doc #
 /doc/

README.md

@@ -308,6 +308,8 @@ import * as _ from 'lodash';
  * check out https://github.com/cnpm/cnpm
 * If you're looking to add Angular 2 Material Design
  * check out the [material2](https://github.com/AngularClass/angular2-webpack-starter/tree/material2) branch
+* If you're looking Sass/Scss support
+ * check out the [sass-support](https://github.com/AngularClass/angular2-webpack-starter/tree/sass-support) branch
 * node-pre-gyp ERR in npm install (Windows)
  * install Python x86 version between 2.5 and 3.0 on windows see issue [#626](https://github.com/AngularClass/angular2-webpack-starter/issues/626)
 * `Error:Error: Parse tsconfig error [{"messageText":"Unknown compiler option 'lib'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'strictNullChecks'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'baseUrl'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'paths'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'types'.","category":1,"code":5023}]`

config/webpack.common.js

@@ -13,6 +13,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
 const HtmlElementsPlugin = require('./html-elements-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 /*
  * Webpack Constants
@@ -44,7 +45,7 @@ module.exports = {
    *
    * See: http://webpack.github.io/docs/configuration.html#cache
    */
-   //cache: false,
+  //cache: false,
 
   /*
    * The entry point for the bundle
@@ -55,8 +56,8 @@ module.exports = {
   entry: {
 
     'polyfills': './src/polyfills.browser.ts',
-    'vendor':    './src/vendor.browser.ts',
-    'main':      './src/main.browser.ts'
+    'vendor': './src/vendor.browser.ts',
+    'main': './src/main.browser.ts'
 
   },
 
@@ -145,14 +146,29 @@ module.exports = {
         loader: 'json-loader'
       },
 
+      /*
+       * ExtractTextPlugin, style loader and css loader support for global *.css files
+       * Inject css files as globally in a bundle
+       *
+       */
+      {
+        test: /\.css$/,
+        exclude: helpers.root('src', 'app'),
+        loader: ExtractTextPlugin.extract({
+          fallbackLoader: 'style-loader',
+          loader: 'css-loader?-url'
+        })
+      },
+
       /*
        * to string and css loader support for *.css files
        * Returns file content as string
        *
        */
       {
         test: /\.css$/,
-        loaders: ['to-string-loader', 'css-loader']
+        include: helpers.root('src', 'app'),
+        loaders: ['exports-loader?module.exports.toString()', 'css-loader?-url']
       },
 
       /* Raw loader support for *.html
@@ -167,9 +183,9 @@ module.exports = {
       },
 
       /* File loader for supporting images, for example, in CSS files.
-      */
+       */
       {
-        test: /\.(jpg|png|gif)$/,
+        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
         loader: 'file'
       }
     ]

config/webpack.dev.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');
 
 /**
  * Webpack Constants
@@ -52,7 +53,7 @@ module.exports = webpackMerge(commonConfig, {
    * See: http://webpack.github.io/docs/configuration.html#devtool
    * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
    */
-  devtool: 'cheap-module-source-map',
+  devtool: 'cheap-module-eval-source-map',
 
   /**
    * Options affecting the output of the compilation.
@@ -116,6 +117,14 @@ module.exports = webpackMerge(commonConfig, {
         'HMR': METADATA.HMR,
       }
     }),
+
+    /**
+     * Plugin: ExtractTextPlugin
+     * Description: Load css file separately in a bundle
+     *
+     * See: https://github.com/webpack/extract-text-webpack-plugin
+     */
+    new ExtractTextPlugin('[name].css'),
   ],
 
   /**

config/webpack.prod.js

@@ -16,6 +16,7 @@ const IgnorePlugin = require('webpack/lib/IgnorePlugin');
 const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
 const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
 const WebpackMd5Hash = require('webpack-md5-hash');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 /**
  * Webpack Constants
@@ -157,8 +158,8 @@ module.exports = webpackMerge(commonConfig, {
 
 
       beautify: false, //prod
-      mangle: { screw_ie8 : true }, //prod
-      compress: { screw_ie8: true }, //prod
+      mangle: {screw_ie8: true}, //prod
+      compress: {screw_ie8: true}, //prod
       comments: false //prod
     }),
 
@@ -174,6 +175,14 @@ module.exports = webpackMerge(commonConfig, {
       helpers.root('config/modules/angular2-hmr-prod.js')
     ),
 
+    /**
+     * Plugin: ExtractTextPlugin
+     * Description: Load css file separately in a bundle
+     *
+     * See: https://github.com/webpack/extract-text-webpack-plugin
+     */
+    new ExtractTextPlugin('[name].[hash].css'),
+
     /**
      * Plugin: IgnorePlugin
      * Description: Don’t generate modules for requests matching the provided RegExp.

config/webpack.test.js

@@ -9,6 +9,7 @@ const helpers = require('./helpers');
  */
 const ProvidePlugin = require('webpack/lib/ProvidePlugin');
 const DefinePlugin = require('webpack/lib/DefinePlugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 /**
  * Webpack Constants
@@ -86,10 +87,11 @@ module.exports = {
         test: /\.js$/,
         loader: 'source-map-loader',
         exclude: [
-        // these packages have problems with their sourcemaps
-        helpers.root('node_modules/rxjs'),
-        helpers.root('node_modules/@angular')
-      ]}
+          // these packages have problems with their sourcemaps
+          helpers.root('node_modules/rxjs'),
+          helpers.root('node_modules/@angular')
+        ]
+      }
 
     ],
 
@@ -128,23 +130,37 @@ module.exports = {
        *
        * See: https://github.com/webpack/json-loader
        */
-      { test: /\.json$/, loader: 'json-loader', exclude: [helpers.root('src/index.html')] },
+      {test: /\.json$/, loader: 'json-loader', exclude: [helpers.root('src/index.html')]},
+
+      /**
+       * ExtractTextPlugin, style loader and css loader support for global *.css files
+       * Inject css files as globally in a bundle
+       *
+       */
+      {
+        test: /\.css$/,
+        exclude: [helpers.root('src/index.html'), helpers.root('src', 'app')],
+        loader: ExtractTextPlugin.extract({
+          fallbackLoader: 'style-loader',
+          loader: 'css-loader?-url'
+        })
+      },
 
       /**
        * Raw loader support for *.css files
        * Returns file content as string
        *
        * See: https://github.com/webpack/raw-loader
        */
-      { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'], exclude: [helpers.root('src/index.html')] },
+      {test: /\.css$/, loaders: ['exports-loader?module.exports.toString()', 'css-loader?-url'], include: helpers.root('src', 'app')},
 
       /**
        * Raw loader support for *.html
        * Returns file content as string
        *
        * See: https://github.com/webpack/raw-loader
        */
-      { test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] }
+      {test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')]}
 
     ],
 
@@ -200,6 +216,14 @@ module.exports = {
       }
     }),
 
+    /**
+     * Plugin: ExtractTextPlugin
+     * Description: Load css file separately in a bundle
+     *
+     * See: https://github.com/webpack/extract-text-webpack-plugin
+     */
+    new ExtractTextPlugin('[name].css'),
+
 
   ],
 

package.json

@@ -96,6 +96,7 @@
     "es6-promise-loader": "^1.0.1",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
+    "extract-text-webpack-plugin": "^2.0.0-beta.3",
     "file-loader": "^0.9.0",
     "gh-pages": "^0.11.0",
     "html-webpack-plugin": "^2.21.0",
@@ -115,6 +116,7 @@
     "remap-istanbul": "^0.6.3",
     "rimraf": "^2.5.2",
     "source-map-loader": "^0.1.5",
+    "string-replace-loader": "^1.0.3",
     "style-loader": "^0.13.1",
     "to-string-loader": "^1.1.4",
     "ts-helpers": "1.1.1",

src/app/+detail/index.ts

@@ -1,4 +1,4 @@
-import { BrowserModule } from '@angular/platform-browser'
+import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';

src/app/app.component.ts

@@ -11,7 +11,6 @@ import { AppState } from './app.service';
  */
 @Component({
   selector: 'app',
-  encapsulation: ViewEncapsulation.None,
   styleUrls: [
     './app.style.css'
   ],

src/app/app.style.css

@@ -1,8 +1,3 @@
-html, body{
-  height: 100%;
-  font-family: Arial, Helvetica, sans-serif
-}
-
 span.active {
   background-color: gray;
 }

src/main.browser.ts

@@ -5,6 +5,12 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { decorateModuleRef } from './app/environment';
 import { ApplicationRef } from '@angular/core';
 import { bootloader } from '@angularclass/hmr';
+
+/*
+ * Global styles
+ */
+import './styles/style.css';
+
 /*
  * App Module
  * our top level module that holds all of our components

src/styles/style.css

@@ -0,0 +1,16 @@
+html, body {
+  height: 100%;
+  font-family: Arial, Helvetica, sans-serif
+}
+
+body:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  opacity: 0.02;
+  background-image: url(../assets/img/angular-logo.png);
+}