5

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.

BeetleJuice
  • 39,516
  • 19
  • 105
  • 165

2 Answers2

4

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

BeetleJuice
  • 39,516
  • 19
  • 105
  • 165
  • That's what I figured out too (that ngc is having issues processing sass files), but I'm wondering how to convert these sass files to css files, and yet keep the structure of the project as is (i.e. Webpack shall/can not be used in this step). How did you do this and/or what did you use? – Christophe Vidal Nov 06 '16 at 13:30
  • @ChristopheVidal Each component's template is in a `.scss` file in the same directory. The component's `styleURLs` refers to `.css`. During the build steps, the sass file is converted to css, and the css gets inlined. To accomplish this I'm using the [angular-seed](https://github.com/mgechev/angular-seed/wiki/Working-with-SASS) setup. – BeetleJuice Nov 06 '16 at 20:31
  • @BeetleJuiceDo you know how to get that done with angular cli? – Uday Hiwarale Jun 07 '17 at 07:02
0

@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
Dave Plug
  • 1,068
  • 1
  • 11
  • 22