title: How to include an external css file using Webpack and Angular2?
body: <p>I am trying to add an external reference to a CSS file in Angular2 using Webpack.
  My css is defined as </p>
  
  <pre><code>{ test: /\.css$/, loader: "style-loader!css-loader" },
  </code></pre>
  
  <p>in my webpack.config.js file and I can load css just fine when doing in a head of a typescript file:</p>
  
  <pre><code>require("./styles/style.css");
  </code></pre>
  
  <p>However when I try and load a CSS file inline inside a component as in:</p>
  
  <pre><code>@Component({
  selector: 'todo-list',
  template: `
              &lt;section class="todoapp"&gt;                 
              &lt;/section&gt;
  `,
  styles: [require('./Todolist.css')], // &lt;--------------
  directives: [TodoItem],
  providers: [TodosService]
  ...
  </code></pre>
  
  <p>I get an error of: EXCEPTION: TypeError: s.replace is not a function</p>
  
  <p>I also tried to load CSS via:</p>
  
  <pre><code>styles: [require('style-loader!css-loader!./Todolist.css')]
  </code></pre>
  
  <p>but not much luck</p>
  
  <p>any help is appreciated</p>
  
  <p>regards</p>
  
  <p>Sean</p>