Ionic v3 scoped CSS

I’m working on a very large app and I’m having some issues with CSS scoping. By default CSS selectors are prevented from leaking up to parent components because of this:

@Component({
  selector: 'page-dashboard',
  templateUrl: 'dashboard.html'
})

…and this:

page-dashboard {
  // ...
}

However, it’s still possible for a parent’s styles to unintentionally affect child components. That’s the problem I’ve having and it seems to come up frequently given the size of the app.

According to this post, CSS scoping seems to be enabled by default in later versions of Ionic. However, I’m stuck with 3.9.2. The creator of that post seems to be having the opposite problem that I’m having. Or something…

I don’t understand how component stylesheets make their way into the final stylesheet. I’m not telling Angular about it so how does it work?

According to the Angular docs, I should be able to set styleUrls to point to my stylesheet. Using the default view encapsulation mode, that will add attributes to the rendered HTML and put those attributes into the stylesheet. That doesn’t seem to work though. I tried variations of this with no luck:

@Component({
  selector: 'page-dashboard',
  templateUrl: 'dashboard.html',
  styleUrls: ['./dashboard.scss']
})

I get an error saying that it couldn’t find the file. Inline styles work using styles instead of styleUrls but that’s not what I’m after. I don’t want to put my stylesheet into my TypeScript file and I don’t want the styles to appear in a <style> element. Even if it did work, I’m not sure how it will interfere with the system that seems to be scanning the source tree for SASS files. I’ll probably end up with the same styles appearing twice.

So is there any way to accomplish this using v3?

1 post - 1 participant

Read full topic