Moving HTML and SCSS from page to component

Ionic Framework ionic-v3
1

By moving HTML and SCSS from page to component, the whole design got messed up completely and I’m not sure why. Re-writing all of my SCSS from zero seems like a bit of an extra workload. I’m wondering if there something I’m missing where the inner HTML and SCCS of some page of a page, which was not moved to a component needs to be changed in order to make the design look good again?

2

Are you sure you have put a correct selector on top of SCSS?

For instance:

home-page {
   
  .class1 { width: 100px; 
height: 200px;
color: red; }

}

Your component:

component1 {

    .class1 { width: 100px; 
height: 200px;
color: red; }

}

I don’t see why it wouldn’t work…

1 Like
3

yes, I did. It was automatically done by Ionic CLI. Could “listing” be a rescticted name for a component??

@Component({
  selector: 'listing',
  templateUrl: 'listing.html'
})

In SCSS:

listing {
     background-color: #000;
}
4

Ionic component must wrap the component HTML+SCSS into its own wrapper because the same HTML+SCSS is displayed differently within a component and directly within a page, see screenshot below with green outer div and red inner div with some text.

22
Screen Shot 2018-01-22 at 15.38.22.png732×280 10.2 KB

5

This was extremely annoying. Basically, your component must have 2 part name like “listingItem”, it can’t be just “listing”. I might have missed it, but haven’t seen this in the documentation (which Ionic doesn’t have, and haven’t looked too deep in Angular).

Takeaway: “firstSecond” is a good name, a bad name is “first”