scss component files in this demo do not affect anything about angular-meteor-base HOT 5 CLOSED

@laserus I think this is because you shouldn't put the styles in app { } or demo {} brackets, as the styles are encapsulated within the component (in the component template there are no <app> or <demo> tags, those are in the parent component).

If you want styles to work like this you should set encapsulation: ViewEncapsulation.None in your component, but that is probably not what you want since the styles will apply globally.

The boilerplate project should probably be changed to avoid confusion.

from angular-meteor-base.

@ijager Yes, I guessed that also, but as they present in this demo repo, I thought there still could be some meaning for them.

Then another question:

If I wat to make demo.component background all red what should I do in the file, except polluting with classes? I cannot write to demo.component.scss this:

background-color: red;

I need some selector...

* {
  background-color: red;
}

Is there a good solution? or only class way is the best:

.demo {
  background-color: red;
}

and then add this class to template

from angular-meteor-base.

Hi @laserus ,

I think the simplest solution is indeed to wrap your component in a div with a .demo class for example. It feels redundant to me too.

The only workarounds I see are to define the demo {} css in the parent component or in some global style sheet. But then the component is not self-containing..

from angular-meteor-base.

Ok, understood. Thanks!

from angular-meteor-base.

I found a better solution here

You should be able to use :host

:host {
  display: block;
  width: 100%;
  height: 100%;
}

from angular-meteor-base.