Sass in Angular 2 and webpack not working

Question

I am acting according to sass-loader package: In my webconfig I have:

{
        loaders: [
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            }
        ]
    }

In the module I import the scss like this:

 styles:  require('./home.scss') ,

Scss file looks like this:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

md-card {
font: 100% $font-stack;
color: $primary-color;
}

Unfortunately, when I run the app, the following happens:

ERROR in ./src/app/home/home.scss
Module parse failed: C:\src\app\home\home.scss Line 1: Unexpected token :
You may need an appropriate loader to handle this file type.
| $font-stack:    Helvetica, sans-serif;
| $primary-color: #333;
|
@ ./src/app/home/home.component.ts 49:20-42

I think everything should be ok, when it fails then?

Don't know if that's the issue, but styles in the component metadata definition object should be an array: styles: [require('./home.scss')], — Yaron Schwimmer
– Yaron Schwimmer, Commented Apr 26, 2016 at 8:54
Yes, I also tried with that syntax, it does not work either. — adam nowak
– adam nowak, Commented Apr 26, 2016 at 8:57

cebor · Accepted Answer · 2016-04-26 14:34:57Z

2

I recommend the raw-loader to import styles into angular2 components: https://github.com/webpack/raw-loader

...
loaders: [
    {
        test: /\.scss$/,
        loaders: ['raw-loader', 'sass-loader']
     }
]
...

Also styles should be an Array!

...
styles: [ require('./home.scss') ],
...

Also see: https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components

BTW: You can use the raw-loader for importing templates, too.

edited Apr 26, 2016 at 14:34

answered Apr 26, 2016 at 10:55

cebor

6,5665 gold badges26 silver badges31 bronze badges

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

2 Comments

Uland Nimblehoof Over a year ago

This solutions works only for dev, try build with ['raw-loader', 'sass-loader'] only, I cant find solution with avoid require in component.

cebor Over a year ago

@UlandNimblehoof try: npmjs.com/package/@ngtools/webpack, its a complete replacement for the tsc, supports autoimporting templates/styles and aot compiling

Collectives™ on Stack Overflow

Sass in Angular 2 and webpack not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related