Does Angular 2 Ahead-of-Time compiler support SASS stylesheets?

Question

I'd like to make another attempt at using Angular 2 Ahead-of-Time compilation.

This will require a significant refactoring on my part because my current setup uses a custom build process that will need to be changed.

Before I start I need to know: if I link to external .scss files in the styleUrls metadata, will the AoT compiler work?

@Component({
    ...
    styleUrls:['./app.component.scss'],
})
export class AppComponent {}

Or should I first convert all my styles to .css and link to CSS stylesheets instead?

The readme doesn't discuss this.

Answer 1

SASS ( .scss files) are not successfully processed by the ahead-of-time compiler ( ngc ). I've had to convert my stylesheets to .css first

Answer 2

@BeetleJuice answer is not completely correct ( or no longer correct ) the only thing you need to do is to provide a loader for sass/scss files doing so in your webpack.config.js :

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

and after this you can include your sass files directly inside your components doing:

styleUrls: ['app.style.sass']

To do this you have to install sass-loader:

npm install sass-loader node-sass webpack --save-dev