Does Angular 2 support the Ahead of the Time SEST compiler style sheets?

Question

I would like to try again using the Angular 2 Ahead-of-Time compilation.

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

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

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

Or do I need to first convert all my styles to .css and a link to CSS stylesheets?

Readme does not discuss this.

Answer 1

SASS files ( .scss ) are not processed early by the compiler ( ngc ). I had to convert style sheets to .css first

Answer 2

Answer to

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

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

after which you can include your sass files directly in your components:

 styleUrls: ['app.style.sass'] 

To do this, you need to install sass-loader:

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