CODEWITHSUNDEEP
cssangulartypescriptsassionic3
Sampath
Sampath

Reputation: 65948

Add scss file to the Stackblitz

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

Upvotes: 14

Views: 7488

Answers (2)

yurzui
yurzui

Reputation: 214245

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 :)

Upvotes: 14

Noman
Noman

Reputation: 887

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.

Upvotes: 2

Related Questions