1

I've multiples pages and I would like to load different CSS files for each page.

Something like this:

status.html

<template>
  <require from="./css/modules/status.css"></require>
</template>

cms.html

<template>
  <require from="./css/modules/cms.css"></require>
</template>

But this is not working properly. On status page load I only have the status.css file, but if I open the cms page I will have the status.css and it will load cms.css.

agnes
  • 139
  • 1
  • 10
  • Possible duplicate of [CSS Managment with the Aurelia-CLI: Every view loads another CSS file to be enforced site wide causing conflicts](http://stackoverflow.com/questions/39355900/css-managment-with-the-aurelia-cli-every-view-loads-another-css-file-to-be-enfo) – peinearydevelopment Sep 27 '16 at 13:08

1 Answers1

2

This is how Aurelia's lazy loading of resources works. Whenever a view is loaded, the css files it requires are loaded in the page and they stay there even if you go to another view.

What you're looking for is a feature that exists in ShadowDOM, but the only browser supporting that at the moment is chrome AFAIK.

The other option was scoped css, but it looks like that's been discontinued: http://caniuse.com/#feat=style-scoped

This issue might be of interest to you: https://github.com/aurelia/framework/issues/234

And for completeness sake, there's actually an oldschool way of doing it: https://css-tricks.com/saving-the-day-with-scoped-css/

Fred Kleuver
  • 7,797
  • 2
  • 27
  • 38