How to use shadow DOM (component scoped styles) in Ionic 2?


#1

Hey all, perhaps I’m missing something obvious, but I can only seem to get styles to work through imports in the app.core.scss file.

How can I reference the styles directly in a component instead of making them global?


#2

What about just do it? ) Ionic 2 uses Angular 2, so you may use component styles without changes. (No need import the style to app.core.scss)


#3

When I tried referencing the url directly it couldn’t find the file. I must have been doing something wrong then.


#4

You could try using inline styles (check out this article for details). If you’re using external files, then make sure that the paths are relative to the www folder. However, note that you’ll probably have to modify the build process (to compile the SCSS files and store the result in the www/build/css folder).


#5

Ah thanks for the tip! You’re right, I probably need to add that to the build process. I’m surprised it’s not there by default though.

I really don’t like inline styles and templates without first class editor support. Using ES6 imports here seems better than the url approach though


#6

I think that it’s reasonable - the styles of all Ionic components and the app pages are in the combined platform-specific CSS file included in index.html, so there’s no real reason to support this out of the box.