Add scss file to the Stackblitz

Question

Can you tell me how to add scss file to the stackblitz. I tried that.But it is not working. Please see that and let me know.

I have tried to add home.html

This is the project: stackblitz

Answer 1

Scss should work in stackblitz:

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: [ './home.scss' ] <== add this
})
export class HomePage {

Styles like

 page-home {
 .buttoncls {

won't work for you with default encapsulation(ViewEncapsulation.Emulated) because page-home is not part of home component template and angular adds attribute like [_ngcontent-c0] to styles.

So we can change page-home to ion-list and see how it works:

Stackblitz Example (ViewEncapsulation.Emulated)

But we can disable encapsulation:

encapsulation: ViewEncapsulation.None

Stackblitz Example (ViewEncapsulation.None)

See also this thread

https://github.com/stackblitz/core/issues/1

As EricSimons commented 9 days ago:

Hey all! We just shipped SASS and LESS support, and we also support the angular-cli.json config too :)

Answer 2

Above answer does not work anymore. Update:

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: [ 'home.scss' ] <== add this
})

Also - the styles must go in the most outside block and shouldn't go under other block.