Fix to allow component styleUrls with webpack without using require inside component.

Author: calebcwells

src/package.json

@@ -29,6 +29,7 @@
     "json-loader": "0.5.4",
     "raw-loader": "0.5.1",
     "style-loader": "0.13.1",
+    "to-string-loader": "1.1.5",
     "typescript": "2.0.2",
     "url-loader": "0.5.7",
     "webpack": "2.1.0-beta.22",

src/webpack.config.js

@@ -1,6 +1,7 @@
 var IsDev = process.argv.indexOf('--env.prod') < 0;
 var Path = require('path');
 var Webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
 
 module.exports = {
@@ -15,6 +16,7 @@ module.exports = {
         publicPath: '/dist/'
     },
     plugins: [
+        new ExtractTextPlugin({ filename: '[name].css' }),
         new ForkCheckerPlugin(),
         new Webpack.DllReferencePlugin({
             context: __dirname,
@@ -28,7 +30,7 @@ module.exports = {
         loaders: [
             { test: /\.ts$/, exclude: [/\.(spec|e2e)\.ts$/], loaders: ['awesome-typescript', 'angular2-template'] },
             { test: /\.html$/, loader: 'html' },
-            { test: /\.css/, loader: 'style!css' },
+            { test: /\.css$/, loader: [ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader' }), 'to-string-loader', 'css-loader'] },
             { test: /\.svg$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
             { test: /\.(jpeg|jpg|gif|png|json)$/, loaders: ["file-loader?name=[name]-[hash:12].[ext]"] }
         ]

src/webpack.config.vendor.js

@@ -1,16 +1,13 @@
 var IsDev = process.argv.indexOf('--env.prod') < 0;
 var Path = require('path');
 var Webpack = require('webpack');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var ExtractCss = new ExtractTextPlugin('vendor.css');
 
 module.exports = {
     resolve: {
         extensions: ['', '.js']
     },
     module: {
         loaders: [
-            { test: /\.css/, loader: ExtractCss.extract(['css']) },
             { test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/, loader: 'url?limit=100000&name=[name].[ext]' },
             { test: /\.json$/, loader: 'json-loader' }
         ]
@@ -24,7 +21,7 @@ module.exports = {
             '@angular/forms',
             '@angular/platform-browser',
             '@angular/platform-browser-dynamic',
-            '@angular/router',
+            '@angular/router'
         ]
     },
     output: {
@@ -33,7 +30,6 @@ module.exports = {
         library: '[name]_[hash]'
     },
     plugins: [
-        ExtractCss,
         new Webpack.optimize.OccurrenceOrderPlugin(),
         new Webpack.DllPlugin({
             path: Path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),