Loading multiple stylesheet for a component in Angular2
<p>I am building an angular2 application. I am facing multiple problems when i try to load multiple stylesheet for the same component. Here is a the code of what i am doing:</p>

<pre><code>import { Component } from '@angular/core';

@Component({
selector: 'my-tag',
templateUrl: 'my-tag.component.html',
styleUrls: [
    './style1.css',
    './style2.css'
    ]
})
export class MyTagComponent{}
</code></pre>

<p>Now here are my problems:</p>

<p>When i try to include the the css file from other directory like this:</p>

<pre><code>styleUrls: [
    './style1.css',
    '../public/style2.css'
]
</code></pre>

<p>I get the error</p>

<p><code>Uncaught Error: Expected 'styles' to be an array of strings.</code></p>

<p>in browser console. </p>

<p>I then included the second stylesheet <code>style2.css</code> in the directory of the component and wrote the first snippet. Now the style is being loaded but it is being loaded globally. The second stylesheet has class names that clash with the bootstrap and instead of bootstrap's style the second stylesheet's style is being applied globally, i.e. other components' templates are being styled from second stylesheet. </p>

<p>Shouldn't the urls listed in <code>styleUrls</code> be applied only on the component and not do harm to other components?</p>

<p>Can anyone tell me how to load multiple css files for the a specific component without being applied globally.</p>

<p>I have also tried the following workarounds but the style is being applied on all the components that i made.</p>

<pre><code>styles: [
      require('./style1.css').toString(),
      require('../public/style2.css').toString()
 ]
</code></pre>

<p>P.S. I am using webpack as the module bundler for my project.</p>

<p><strong>webpack.config(excerpt)</strong></p>

<pre><code> {
    test: /\.css$/,
    exclude: helpers.root('src', 'app'),
    loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
  },
  {
    test: /\.css$/,
    include: helpers.root('src', 'app'),
    loader: 'raw'
  }
</code></pre>