Move css to an external file in an angular 4 component using webpack

Question

This is the error I'm getting:

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

even though I've specified the styles in an array of strings:

styleUrls: ['./app.component.css']

Here is the relevant code, any ideas what I'm doing wrong?

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h2 class="float-left">Hey</h2>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

app.component.css

.float-left {
  float: left;
}

Snippet from webpack.common.js

module: {
  rules: [{
    test: /\.ts$/,
    loaders: ['awesome-typescript-loader', 'angular2-template-loader']
  },
  {
    test: /\.html$/,
    loader: 'html-loader'
  },
  {
    test: /\.css$/,
    loader: 'css-loader'
  }]
},

weo3dev · Accepted Answer · 2017-06-10 14:54:16Z

1

As I have not personally experienced this - I did find a closed thread (but with some recent additions, nonetheless) - that may help you with your issue.

https://github.com/webpack-contrib/style-loader/issues/123

The first suggested, and apparently working at the time, solution that sticks out to me is this one:

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

There are other suggestions and solutions listed further down; hopefully one of those will help you resolve your problem.

One thing to note - it seems it may/may not make a difference if you're using angular-cli. If you are, then make sure you're following their guidelines with using webpack, as they have a couple small differences, as opposed to using a non-angular-cli build.

answered Jun 10, 2017 at 14:54

weo3dev

3163 silver badges9 bronze badges

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

Comments

chumtoadafuq · Accepted Answer · 2017-06-10 15:24:22Z

0

You need to use style-loader after css-loader.

test: /\.css$/,
use: [{loader: 'style-loader'},{loader: 'css-loader'}]

The loaders in the "use" array are run in order from the last in the array to first in the array. First the css-loader is run to prepare the CSS, then the result is passed to the style-loader to embed the styles in the page.

answered Jun 10, 2017 at 15:24

chumtoadafuq

2665 silver badges14 bronze badges

Collectives™ on Stack Overflow

Move css to an external file in an angular 4 component using webpack

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related