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'] }