Anuglar2 -找不到模块错误

我使用Angular2 rc4目前我可以导入一个css文件与ExtractTextPlugin。我使用html-loader没有任何问题。然而，当我尝试加载css文件时，我得到错误:找不到模块"./app.component.css"或预期的'styles'是字符串数组。我怎么解决这个问题?app.comonent.ts

import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';
const template = require('./app.component.html'); 
const sytles = require('./app.component.css'); 
// Components
import {NavComponent} from './nav/nav.component';
import {FooterComponent} from './footer/footer.component';
@Component({
    selector: 'my-app',
    template: template,
    directives: [ROUTER_DIRECTIVES, NavComponent, FooterComponent],
    styles: [sytles],
    precompile: [NavComponent, FooterComponent]
})
export class AppComponent {
}

webpack.config.js

var webpack = require("webpack");
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    "vendor": "./src/vendor",
    "app": "./src/boot"
  },
  output: {
    path: __dirname,
    filename: "./dist/[name].bundle.js"
  },
  resolve: {
    extensions: ['', '.ts', '.js']
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /'.ts/,
        loaders: ['ts-loader'],
        exclude: /node_modules/
      },
      {
          test: /'.html$/,
          loader: 'html'
      },
      {
          test: /'.css$/,
          loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"./dist/vendor.bundle.js"),
new ExtractTextPlugin('[name].css')
  ]
}