styleUrls - Not able to load the css style sheet for the component using relative path in angular 2

问题

I have a "Hero" component defined under "app/Hero" in angular 2. The hero component as "hero.component.html","hero.component.css" and "hero.component.ts" files defined. the templateUrl works fine but the styleUrls do not load. Resource not found error will be displayed. I referred this link https://angular.io/docs/ts/latest/guide/component-styles.html#!#relative-urls to load styles using relative URLs.

  @Component({
  providers: [HeroService],
  templateUrl: './Hero.component.html',
  styleUrls: ['./Hero.component.css'],
})

回答1:

Check out the filename and make sure you type it correctly. It could be case sensitive! Also make sure you follow the correct folder structure.

If you have the following in your component declaration

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css'],
})

your folder hierarchy should look like this:

app.module.ts
hero
- hero.component.ts
- hero.component.css
- hero.component.html

回答2:

This worked for me:

styles: [require('./app.component.css').toString()]

And you have to change webpack.config.js. Instead of 'raw-loader' you have to specify the next:

loader: 'style-loader!css-loader'

来源：https://stackoverflow.com/questions/43851295/styleurls-not-able-to-load-the-css-style-sheet-for-the-component-using-relativ