How to use 'styleUrls' in @Page


Hi, i’m wondering how to use this property in @Page decorator, like i would do in @Component Angular2 decorator.


I wonder as well. Would be great to do it the same way as standard Angular2 and not importing everything in app.core.scss



What’s wrong with the way the generator does it?


It means if you are not careful, you could override CSS classes somewhere else in the app, as everything is global. This gets VERY common once the app gets big.

All it takes is someone to use the same css selector, and suddenly something else changes somewhere else in the app! Highly highly highly annoying.

The obvious solution is to encapsulate every component with a div, add a class to it, then put all your component stuff inside the classed div. But it isn’t fool proof (we still get these global styling clashing issues once in a while), and it’s a hackaround for the obvious official solution proposed by the Google Angular2 team (using styleUrls).


The generator gives each page and component a corresponding SCSS file, which walls styling rules off using component selectors.