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?

Charlie Martin · Accepted Answer · 2017-01-07 00:19:10Z

24

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

edited Jan 7, 2017 at 0:19

answered Jan 7, 2017 at 0:11

Charlie Martin

8,4363 gold badges39 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

serlingpa Over a year ago

Yes, your second suggestion worked very well. Thanks! The first gave rise to the same error.

Charlie Martin Over a year ago

In the case of the first one, material2-app-theme.scss is probably not in the include path. You could just remove that include line altogether. The second is nicer anyway though

Reza Over a year ago

I am using angular-cli project, where is the location of scss loader in the project? I searched for that text and I wasn't able to find it

riofly · Accepted Answer · 2017-05-16 06:56:05Z

16

For completing the issue, if you use ExtractTextPlugin, the "webpack.config.js" is:

{
    test: /\.(css|scss)$/,
    loaders: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ['css-loader?sourceMap', 'scss-loader?sourceMap']
    })
}

Then I solve issue with:

{
    test: /\.(css|scss)$/,
    loaders: ['to-string-loader'].concat(ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ['css-loader?sourceMap', 'scss-loader?sourceMap']
    }))
}

edited May 16, 2017 at 6:56

answered May 9, 2017 at 10:41

riofly

1,7853 gold badges19 silver badges44 bronze badges

2 Comments

Yhlas Over a year ago

I've struggling with this for days now, and this solution worked. Thanks a ton, @riofly

Sam Kelham Over a year ago

This has helped me so much

B.Ma · Accepted Answer · 2018-03-14 08:07:35Z

0

Alternatively, add one inline loader to loaders array, with no extra installation needed

loaders: ['exports-loader?module.exports.toString()', other-loader]

answered Mar 14, 2018 at 8:07

B.Ma

9997 silver badges9 bronze badges

Comments

Vedran · Accepted Answer · 2018-12-18 16:54:53Z

0

This is the configuration that works for me to load .css files.

packages.json:

"devDependencies": {
    .....
    "to-string-loader": "^1.1.5",
    "css-loader": "^0.28.11"
}

webpack.js:

module: {
    rules: [
        .....
        {
            test: /\.css$/,
            loaders: ["to-string-loader", "css-loader"]
        }
    ]
}

App.component:

@Component({
    .....
    styleUrls: ["./app.component.css"]
})

answered Dec 18, 2018 at 16:54

Vedran

11.2k6 gold badges54 silver badges60 bronze badges

Comments

TARJU · Accepted Answer · 2020-02-07 10:43:05Z

0

It's the raw-loader from webpack which is causing this error

If you were using raw-loader get rid of that and use to-string-load

so install it

npm i to-string-loader --save-dev
or
yarn add to-string-loader

Here is my config section

rules: [
 {
        test: /\.scss$/,
        exclude: [/node_modules/, /\.global\.scss$/],
        use: ["to-string-loader", "css-loader", "sass-loader"]
      }
]

answered Feb 7, 2020 at 10:43

TARJU

2,0041 gold badge16 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

3 Comments

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

Comments

Comments

Related