Error: Expected 'styles' to be an array of strings

Question

I have been using this seed project to as the basis for my new Angular 2 project. Unfortunately, it does not come configured to use scss, so I have to add that configuration myself.

I am using Angular Material so am importing a default theme in my app component like this:

@Component( {
    selector: 'my-app',
    styles: [require('./app.component.css'), require('./material2-app-theme.scss')],
    templateUrl: './app.component.html'
} )

However, this yields the following error in the browser at runtime:

Uncaught Error: Expected 'styles' to be an array of strings.

I have tried various configurations in my webpack config, and am currently going with this:

{ 
    test: /\.css$/, 
    loaders: ['to-string-loader', 'css-loader'] 
},
{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: [helpers.root( 'src', 'styles' )]
}

There are a handful of references to this error on the interweb but none of them solve my problem. Any ideas how to fix this?

Answer 1

You are only passing the css files, and not the scss files, to to-string-loader, so require('./material2-app-theme.scss') is not returning a string

Change the scss loader to...

{
    test: /\.scss$/,
    loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
    include: [helpers.root( 'src', 'styles' )]
}

Also make sure that ./material2-app-theme.scss is in the include folder

---

FYI You could easily combine these two loaders into one and simply use...

{
    test: /\.(css|scss)$/,
    loaders: ['to-string-loader', 'css-loader', 'sass-loader']
}