Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
59 lines (45 sloc) 1.77 KB
id title date author layout guid permalink image categories tags
946
Angular 2: how to import your css file with Webpack without errors
2017-02-21 23:10:21 +0000
Marco Molteni
post
/2017/02/21/angular-how-to-import-your-css-file-with-webpack-without-errors/
/wp-content/uploads/2017/03/webpack-logo-100x37.png
Angular
Angular 2
Uncategorized
Angular
css
error
webpack

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

template:
 `
    <h2>{{hero.name}}</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'] }