How to use .scss syntax, and also compile scss in components?

[jh-code]

Is there any way to instead of using the Sass indented syntax, use the scss syntax for the main stylesheet?

Also, including scss files in components themselves, with the styleUrls property in a component? For example:

@Component( {
  selector: 'home-component',
  styleUrls: [ 'home.component.scss' ],    // <-- this here doesn't seem to do anything
  templateUrl: 'home.component.html'
} )

[jh-code]

After further investigation, I was able to edit the scripts/lib/server.js to use the .scss file instead, however livereload doesn't seem to care about it. I have to stop the development server and start it again for the changes to take effect. Same when I put a scss file in the styleUrls of a component. Is this a bug?

[jkuri]

Hey Jared. Thanks for your interest in this starter. No, its not a bug, but its a bit selfish I have this configured as it fits to my own preferences and not customisable for all users.

1. You need to fix https://github.com/jkuri/angular2-rollup-starter/blob/master/scripts/lib/server.ts#L64 here for to scss if you want your file to be watched
2. For inlined styles you need to update rollup-plugin-angular https://github.com/jkuri/angular2-rollup-starter/blob/master/scripts/lib/build.ts#L76 and add sass compiler to this plugin. Check https://github.com/cebor/rollup-plugin-angular for how this is done, I checked and its easy achievable.

Any further questions, just let me know.

[jh-code]

Cool, thanks for the quick response. This is my first attempt at a rollup bundle of ng2, so bear with me haha!

I also enabled indentedSyntax: true in scripts/lib/css.ts and live reload works as expected for the main stylesheet. I'm not sure if that's what did it. And I also modified the switch statement in scripts/lib/server.ts from .sass to .scss as well.

I'll take a look at the rollup-plugin-angular, thank you!

[jkuri]

No problem! The second thing you did in the switch statement was it. Sure, rollup-plugin-angular actually provides example exactly for scss in the readme. Otherwise, as long as you treat all external dependencies as external in config so your source files are compiled with cached builds, this thing flies! We are using this on a medium to large scale projects and have cached builds not over 1.5s.

[jh-code]

Alright, I'm getting the hang of this. I got it added in, however it doesn't seem to want to livereload (for the component stylesheet). The main stylesheet livereload's fine. I did add in the preprocessor in multiple places in scripts/lib/build.js and nothing seems to want to make it reload, maybe I'm not understanding how livereload works lol. I'll keep looking into it unless you know the answer off-hand. Thanks again!

[jkuri]

Actually I do. Update this line to be something like:

this.builder.cache = null;
compileSass(sassSrc, cssDest).concat(this.builder.buildDevMain).subscribe(data => { observer.next(data); });

That should do the trick.

[jh-code]

Perfect! Thanks! Appreciate the help. I'll close with this comment. :)