According to the Angular documentation load an external style file in a component is as easy as :

template:
 `
    <h2></h2>
    <hero-team [hero]=hero></hero-team>
     <ng-content></ng-content>
`,
  styleUrls: ['app/hero-details.component.css']

This configuration is challenging when you have building process that include Webpack. In our reference example application the call of the css file using styleUrl

@Component({
    selector: 'cv-experience',
    templateUrl:'cv-experience.html',
    styleUrls:['cv.css']
})

resulted in this error:

{'Uncaught Error: Expected 'styles' to be an array of strings. at assertArrayOfStrings (eval at <anonymous> '}

To solve the issue we had to migrate from Webpack 1.x to the new version 2 and call the css file with the following code:

@Component({
    selector: 'cv-experience',
    templateUrl:'cv-experience.html',
    styles:[require('./cv.css').toString()]
})

This is the loader of Webpack

{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.scss$/,loaders: ['style', 'css', 'postcss', 'sass'] }