@CssImport on any @Route affects all @Routes

Flow
1

I have two different @Routes. They each have their own @CssImport to their own CSS files. I keep all the CSS files in frontend/styles. Yet I notice that regardless which of the routes I go to, they both have each other’s CSS files taking affect. I went to the DevTools on my browser and verified this.

Is this expected behavior? If it is expected, is there a way to can limit the scope of a CssImport to only affect the @route I want it own, or a way to accomplish same?

2

Yes, the CssImport are not scoped by Route.

The easiest way to scope your style it is:

  • For global styles, add a parent css class and do it in your css. like .my-route-1 .component
  • For a component, add a specific theme on your component

It’s the same “behavior” for JsModule annotation.