Aurelia's require element includes external resource inline?

Question

When working through the beginning tutorial, there's a point when one "requires" the bootstrap libraries (CSS):

<require from="bootstrap/css/bootstrap.css"></require>
<require from="font-awesome/css/font-awesome.css"></require>

When I look in Chrome's inspector, I don't find these CSS files as sources. Instead it seems like it is all inlined in the page.

Is this true, or just something with the debugger? If it is - won't this affect caching in the browser (CSS needs to re-download)?

Answer 1

When a CSS resource is imported via the <require> tag, the ES6 module loader (polyfilled by SystemJS) is used to download the CSS. This is a standard XMLHttpRequest and the request will be cached by the browser's standard caching mechanisms. Once the CSS (text) is downloaded Aurelia stuffs it into a <style> element and appends the <style> element to the DOM in the appropriate way, depending on whether the scoped attribute was used and whether the element is in the shadow DOM.

The relevant code is here.

The benefit of this approach is CSS imports have consistent behavior with other types of resources such as HTML and JS in terms of relative paths, bundling and caching. It also enables Aurelia to handle the scoped-css and shadow DOM scenarios.